Vue Native按钮内文本居中问题：align-items与justify-content设置无效

Hey there! The issue here is that you haven't set your .button container to use flexbox layout yet—align-items and justify-content only work on flex containers. Let me walk you through the fix:

The Problem #

You tried using flexbox alignment properties, but they won't take effect unless the parent element (your .button) is explicitly set as a flex container with display: flex. I also noticed your border-radius value was missing a unit, which might prevent it from rendering correctly.

The Solution #

Update your .button CSS class to include display: flex along with the alignment properties, and add the unit to border-radius:

.container {
  background-color: white;
  margin-top: 250px;
  align-items: center;
}
.button {
  padding: 10px;
  background-color: #0b5376;
  width: 250px;
  height: 50px;
  border-radius: 15px; /* Added px unit for proper rounding */
  margin-top: 20px;
  display: flex; /* Enables flexbox layout for the container */
  align-items: center; /* Vertically centers the text */
  justify-content: center; /* Horizontally centers the text */
}
.loginText {
  color: white;
  font-weight: bold;
  font-size: 18px;
}

Why This Works #

• display: flex turns the .button into a flex container, which activates the flexbox alignment properties you tried using earlier.
• align-items: center aligns the child loginText element vertically in the middle of the button.
• justify-content: center aligns the child element horizontally in the center of the button.

After making these changes, your "login" text will be perfectly centered inside the button.

内容的提问来源于stack exchange，提问作者Choy