I have the below code in my CSS file which results in my grid/box items displaying to the left of the webpage. However I'd like them to be centered. I tried removing float;left and many alternatives but nothing works. What can I add/remove from the below to center them?
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
and XX>LI:
display: block;
margin-bottom: 3px;
margin-top: 0px;
overflow:hidden
Unless you wish to use flex-boxes ( which make this very easy ) usually I would try something along the following lines. It is the margin:9px auto
combined with float:none
that does the trick:
.centred{
display:block;
float:none;
/* a combination of float:none and left/right margin of auto */
margin:9px auto;
width:170px;
height:235px;
background:#f4f4f4;
border:1px solid #dedede;
padding:4px;
border-radius:4px;
text-align: center;
margin-bottom:20px;
position:relative;
box-sizing:content-box;
}
If i understood what you're asking, you should remove the float: left
on the element and put display: inline-block
, then text-align: center
on the container
If you have access to html simply
<center>text</center>
or
if you still want to use CSS remove
float: left;
and add
display: inline-block;
text-align: center;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.