Question

我有三个不同的div标签（不在彼此里面）和代码，所以它有一个放置左，中，或右的单词，但中心非常偏离中心。这是HTML代码：

.desc {
  float: right;
  color: skyblue;
}

.desc1 {
  float: left;
  color: skyblue;
}

.desc2 {
  text-align: center;
  color: skyblue;
}

<div class="desc1">
  <h2>What we are here to do!</h2>
  <p>Example</p>
</div>
<div class="desc2">
  <h2>What we have completed</h2>
  <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>

Answer 1

您可以使用flexbox来修复它，

<强> HTML：

<div class="container">
  <div class="desc1">
    <h2>What we are here to do!</h2>
    <p>Example</p>
  </div>
  <div class="desc2">
    <h2>What we have completed</h2>
    <p>Recent work (can include pictures)</p>
  </div>
  <div class="desc">
    <h2>Company Description</h2>
    <p>EXAMPLE!</p>
  </div>
</div>

<强> CSS：

.container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Answer 2

试试这个

＆＃13;

.desc {
text-align: center;
color: skyblue;
width:33%
}

.desc1 {
text-align: center;
color: skyblue;
width:33%
}

.desc2 {
text-align: center;
color: skyblue;
width:33%
}
.desc4{
  display: flex
}

＆＃13;

<div class="desc4">
<div class="desc1">
   <h2>What we are here to do!</h2>
   <p>Example</p>
</div>
<div class="desc2">
   <h2>What we have completed</h2>
   <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>
</div>

＆＃13;

Answer 3

试试这个：

.desc2 {
        height: 200px;
        width: 400px;
        color: skyblue;

        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -200px;
    }

希望这有用：）

Answer 4

您还可以使用<center> </center>标记。它对此非常有效。

Answer 5

相对于剩余空间，您的desc2内容在技术上居中。您的desc（右栏）会被推到其他内容之下，因为它会从desc2的内容结束时开始浮动。

最简单的解决方案是将desc移到desc2之上，以便左/右浮动项首先出现，并从同一个y位置开始。

之后，如果您想确保主要内容真正居中，您可能需要为左/右列指定宽度。

Answer 6

你可以做的实际上是将这3个div包装在另一个div中，然后将 display：flex 应用到这个主div中，如下所示：

.main {
display : flex;
justify-content : space-between;
}

.desc {
  float: right;
  color: skyblue;
}

.desc1 {
  float: left;
  color: skyblue;
}

.desc2 {
  text-align: center;
  color: skyblue;
}

<div class="main">

  <div class="desc1">
    <h2>What we are here to do!</h2>
    <p>Example</p>
  </div>
  <div class="desc2">
    <h2>What we have completed</h2>
    <p>Recent work (can include pictures)</p>
  </div>
  <div class="desc">
    <h2>Company Description</h2>
    <p>EXAMPLE!</p>
  </div>

</div>

由于 float 属性在某些情况下会有一些奇怪的行为，因此当您想要并排显示多个部分时， display：flex 会更合适。我真的建议你多学一点这些flex属性，它们真的很节省时间。我希望它可以帮助你。

Answer 7

我会在现有的div周围使用一个包装器并为它定义一个flexbox。

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10%;
}

.desc {
  color: skyblue;
}

<div class="container">
  <div class="desc">
    <h2>What we are here to do!</h2>
    <p>Example</p>
  </div>
  <div class="desc">
    <h2>What we have completed</h2>
    <p>Recent work (can include pictures)</p>
  </div>
  <div class="desc">
    <h2>Company Description</h2>
    <p>EXAMPLE!</p>
  </div>
</div>

Answer 8

试试这个。

    body{
      width:900px;
      align-items:center;
      margin:0 auto;
      }

我认为这对你有帮助。

Answer 9

您可以使用flexbox来定义body的样式或将此块包装在容器中。这里不需要float。演示：

body {
  /* become a flex-container */
  display: flex;
  /* vertically center flex-items */
  align-items: center;
  /* centering for text, optional here */
  text-align: center;
  
  /* occupy all height */
  margin: 0;
  height: 100vh;
}

/* equal width for children */
body > * {
  flex: 1;
}

.desc {
  color: skyblue;
}

.desc1 {
  color: skyblue;
}

.desc2 {
  color: skyblue;
}

<div class="desc1">
  <h2>What we are here to do!</h2>
  <p>Example</p>
</div>
<div class="desc2">
  <h2>What we have completed</h2>
  <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>

Answer 10

如果您不必使用浮动，您可以简单地移除浮动并将所有div包含在主div中，该div将所有文本分配到中心：

.desc {
  color: skyblue;
}

.desc1 {
  color: skyblue;
}

.desc2 {
  color: skyblue;
}
.div1{
  text-align:center;
}

<div class="div1" >
<div class="desc1">
  <h2>What we are here to do!</h2>
  <p>Example</p>
</div>
<div class="desc2">
  <h2>What we have completed</h2>
  <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>
</div>

我正在尝试将文本放在页面HTML中间

10 个答案: