[英]How can I center left floated items in CSS?
I have the below code in my style.css
file which results in my grid/box items displaying to the left of the webpage, as per these examples: 根据这些示例,我的
style.css
文件中包含以下代码,该结果导致我的网格/框项目显示在网页的左侧:
As you can see, these float to the left but I really want them to be centered. 如您所见,这些控件向左浮动,但我真的希望它们居中。 I've tried removing the
float: left
and putting display: inline-block
and text-align: center
and other variations which didn't work. 我试着去掉
float: left
并放到display: inline-block
和text-align: center
和其他无效的版本。
What do I need to change to make it work? 我需要更改使其工作吗?
.GRID
width:170px;
height:235px;
background:#f4f4f4;
border:1px solid #dedede;
padding:4px;
border-radius:4px;
text-align: center;
float:left;
margin:9px;
margin-bottom:20px;
position:relative
.XOX
display: block;
margin-bottom: 3px;
margin-top: 0px;
overflow:hidden
.widget-container
{
text-align:left
}
.widget-container ul { padding:0; margin:0; list-style-type:none }
.widget-container ul li { margin-bottom:6px; }
If the grids are what you want to center, try using margin: auto;
如果网格是您要居中的位置,请尝试使用
margin: auto;
if you haven't already in the .GRID
selector. 如果尚未在
.GRID
选择器中。 I'd remove your other margins before trying the first time to get a rough idea. 在尝试第一次大致了解之前,我会删除您的其他利润。
I don't know what your HTML looks like 我不知道您的HTML是什么样的
but here is a simple way of centering content inside a div Heres a fiddle https://jsfiddle.net/78fmrtz4/ 但这是将内容居中div的简单方法这里是一个小提琴https://jsfiddle.net/78fmrtz4/
After looking through your site you can simply fix this, by changing styles to: 浏览完您的网站后,您可以将样式更改为:
.widget-container { text-align: center; }
.widget-container .widget-title { text-align:left; }
that is causing you issues, you should rather add that just to the title element that you want left, also on a side not you could achieve this without using floats and just having set widths, note you will have to cater for the margins you have set, 这会导致您遇到问题,您应该将其仅添加到要保留的title元素上,另一方面,如果不使用浮点数并且仅设置宽度,则无法实现此目的,请注意,您将不得不考虑拥有的边距组,
<style type="text/css">
.widget-container {
width:100%;
text-align: center;
background-color:red;
}
.widget-container > ul {
margin:0;
padding:0;
list-style:none outside none;
width:100%;
}
.widget-container > ul > li {
display:inline-block;
margin:5px 0 0 0;
width:30%;
height:100px;
background-color:magenta;
}
</style>
<div class="widget-container">
<ul>
<li>
<a href="#foo" title="Link to foo">
<img="http://yourdomain.co/assets/img.png" alt="ALT TEXT">
</a>
</li>
<li>
<a href="#foo" title="Link to foo">
<img="http://yourdomain.co/assets/img.png" alt="ALT TEXT">
</a>
</li>
<li>
<a href="#foo" title="Link to foo">
<img="http://yourdomain.co/assets/img.png" alt="ALT TEXT">
</a>
</li>
</ul>
</div>
Currently you set your col 当前您设置了上校
<div class="col-xs-12 col-sm-6 col-lg-6">
meaning that you can't achieve the centering positioning. 表示您无法实现居中定位。 There's a way to make your col in center without edit your css.
有一种方法可以使您的col居中,而无需编辑CSS。
I using offset to make you col in center. 我使用偏移量使您居中。
To know more about offset click the link that i provide http://getbootstrap.com/css/#grid-options 要了解有关偏移的更多信息,请单击我提供的链接http://getbootstrap.com/css/#grid-options
Before 之前
<div class="col-xs-12 col-sm-6 col-lg-6">
Replace the before with 将之前的替换为
<div class="col-md-offset-3 col-lg-6">
Result 结果
Comment if got any question. 如有任何问题,请发表评论。 Thanks.
谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.