我想中心在我的页面中间的文本HTML

我有三个不同的div标签（不在对方内）与代码，所以它有一个单词向左，中或右，但中心是非常关闭居中。下面是HTML代码：我想中心在我的页面中间的文本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>

来源

2017-07-28 joekazmac

已经问过的问题：https：//stackoverflow.com/questions/42187838/how-to-vertically-cente r-a-div-on-page/45110782＃45110782 – Super

如果你想让它工作，你需要改变顺序。要浮动到右侧的元素必须是第一个或第二个。如果您将其作为最后一个，那么它不会以任何方式影响元素放置之前的位置。无论如何，你或许不应该这样使用浮动功能;查看flexbox。 – CBroe

你可以显示包含这个div的父标签的代码吗？这可能是因为父标签的宽度不够这3个div？ – 2017-07-28 13:15:06

您可以使用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; 
}

来源

2017-07-28 13:18:43

工作正常。我打算发布一个类似的解决方案。 – Priyanjit

你可以添加解决方案的演示吗？ –

@VictorAllegret它不会那么好，因为我们可以在这里使用不同宽度的元素https://jsfiddle.net/uqr20k64/1/'space-between'只是在元素之间添加相等的空格。这个属性并不关心元素的平等。 –

试试这个：

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

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

希望这是有益:)

来源

2017-07-28 13:17:14 Ahmad

试试这个

.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 
 
}

<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>

来源

2017-07-28 13:19:49

您也可以使用<center> </center>标签。它对此很好。

来源

2017-07-28 13:20:23 JamesSkinner12

我的歉意，我忘了把中心标签的代码格式，所以他们没有出现。现在更新。 – JamesSkinner12

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

最简单的解决方案是将desc向上移动desc2以上，以便左侧/右侧浮动的物品先出现，并将从相同的y位置开始。

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

来源

2017-07-28 13:20:48 BoffinbraiN

你可以做什么是真正包裹的3个div的另一个DIV中，并应用显示：弯曲这个主要的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>

由于浮动属性在某些情况下有一些奇怪的行为，显示：flex当你想要并排显示几个部分时，它更适合。我真的建议你更多地了解这些柔性属性，它们非常节省时间。我希望它可以帮助你。

来源

2017-07-28 13:21:11

它会工作不那么好，因为我们可以在这里不同宽度的元素jsfiddle.net/uqr20k64/1'space-between'只是增加元素之间相等的空间。这个属性并不关心元素的平等。 –

我真的不明白，但是你的意思是，如果有，例如，宽度为900px的元素;一个宽度：200像素，另一个宽度：20像素，他们之间会有相同数量的空间？我没有看到问题出在哪里...... –

好的，让我们来看看OP是否可以。 –

我会在现有的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>

来源

2017-07-28 13:21:30 Gerard

它会工作不那么好，因为我们可以在这里不同宽度的元素jsfiddle.net/uqr20k64/1'space-between'只是在元素之间添加相等的空间。这个属性并不关心元素的平等。 –

试试这个。

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

我认为这对你有帮助。

来源

2017-07-28 13:24:50

您可以为此使用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>

来源

2017-07-28 13:27:04

如果你没有使用浮动，你可以简单地删除花车和附上所有的div中alligns所有文本中心主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>

来源

2017-07-28 13:27:16

我想中心在我的页面中间的文本HTML

回答

相关问题