我有 3 个 div(headcol1、headcol2 和 headcol3)向左浮动:
如何在容器中不使用 padding-left 或 margin-left 将这 3 个元素居中？结果如下所示:
<html>
<div class="fivestar">
<div class="row">
<div class="headcol1">
<p><span>FOLLOW US</span></p>
<p>
<a href="<?php $this->info(" fb_link ") ?>" target="_blank">F</a>
<a href="<?php $this->info(" tt_link ") ?>" target="_blank">G</a>
<a href="<?php $this->info(" yt_link ") ?>" target="_blank">L</a>
<a href="<?php $this->info(" yt_link ") ?>" target="_blank">I</a>
<a href="<?php $this->info(" yt_link ") ?>" target="_blank">X</a>
</p>
</div>
<div class="headcol2">
<img src="public/images/common/starlogo.png">
</div>
<div class="headcol3">
<p><span>PHONE NO:</span></p>
<p class="nums">
<?php $this->info(["phone"]);?>
</p>
<hr width="120px">
<p class="nums">
<?php $this->info(["phone"]);?>
</p>
</div>
</div>
</div>
<html>
<style>
#header .fivestar {
margin: 0 auto;
padding-top: 15px;
}
#header .fivestar .headcol1 {
float: left;
border: 1px solid black;
width: auto;
}
#header .fivestar span {
font-family: 'myriad';
font-size: 1em;
color: #F24033;
}
#header .fivestar .headcol1 p a {
font-family: 'socialicoregular';
font- size: 2em;
color: #999999;
letter-spacing: 15px
}
#header .fivestar .headcol1 p a:hover {
color: #AC0000;
}
#header .fivestar .headcol2 {
float: left;
border: 1px solid black;
padding: 0px 80px 0px 80px;
}
#header .fivestar .headcol3 {
float: left;
border: 1px solid black;
width: auto;
}
#header .fivestar .headcol3 .nums {
font-family: 'RobotoSlab', serif;
color: #555555;
font-size: 1.250em;
font- weight: bold;
margin: 0px;
padding: 0px;
}
#header .fivestar .headcol3 hr {
margin: 0px;
padding: 0px;
}
</style>
最佳答案
举个例子:
.container {
width: 300px; /* for demo purpose */
text-align: center;
background-color: green;
}
.element {
width: 50px;
height: 50px;
background-color:red;
border: thin solid black;
display: inline-block;
}<div class='container'>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
</div>关于html - 将包含 3 个 float div 的容器居中到左侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44260308/