带边框和超赞字体图标的 Div 不会居中

Question

我正在尝试制作某种主页，但我找不到制作 div 中心的方法，我无法很好地解释它所以图片可能会有所帮助

我试着把 text-align: center;对于 div 但它只将文本置于 div 的中心，我希望它像上面的文本一样将 div 居中。

Answer 1

您可以使用

flex

显示属性。
将按钮包裹在设置为 flex 的 div 中：

<div id='flex'>
  <div>Buttons div go in here</div>
</div>

然后使用这个 CSS：

div#flex {
  display: flex;
  justify-content: center;
}

仅供参考

text-align

仅适用于div本身的内容。

Answer 2

您使用了仅居中文本的

text-align

属性；
您应该使用以下 css 使元素居中：

display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

它会在vertically和horizontally上居中你的元素。

Answer 3

CSS property margin: 0 auto;可用于使 div 水平居中。通过将左右边距设置为自动，div 将在其父容器内水平居中。

<div style="border: 1px solid black; width: 200px; margin: 0 auto; text-align: center;">
   <i class="fas fa-home"></i>
   <p>Some text</p>
</div>

Answer 4

可能是因为它们不在同一个div里面？如果您可以在此处上传一些代码，那将会很有帮助，但是这段代码也可以。

<!DOCTYPE html>
<html lang="en-us">
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<style>
  button {
    width: 200px;
    padding: 5px;
    background-color: lightcoral;
    border-radius: 5px;
    color: white;
    font-size: 20px;
  }
  button:hover {
    background-color: lightblue;
  }
  div {
    text-align: center;
  }
</style>

<body>
<div> 
  <p>hello world</p>
  <button> <i class="fa fa-car"></i></button>
  </div>
  
    </body>
</html>

带边框和超赞字体图标的 Div 不会居中

问题描述投票：0回答：4

4个回答

最新问题

带边框和超赞字体图标的 Div 不会居中

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4