我试图将div元素居中。
例如,它向左浮动,但它不会在中心.. - >
.grid_3 {
margin-top:20px;
text-align:center;
margin-bottom:20px;
display: inline-block;
margin: 0 auto;
}
.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>
您可以使用CSS Flexbox。将你的网格包裹成一个名为<div>
的grid-flex
(在我的例子中),并给它以下属性:
.grid-flex {
display: flex; /* Flex Container */
align-items: center; /* Vertically center the content */
justify-content: center; /* Horizontally center the content */
}
同时删除<center>
标记,现在已弃用。
看看下面的代码:
.grid-flex {
display: flex;
justify-content: center;
align-items: center;
}
.grid_3 {
margin-top: 20px;
text-align:center;
margin-bottom:20px;
}
.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
<div class="grid-flex">
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" />
</div>
</div>
</a>
</div>
</div>
</div>
希望这可以帮助!
您可以通过创建父div并添加text-align: center;
来居中
CSS
.container {
text-align: center;
}
.container {
text-align: center;
}
.grid_3 {
margin-top:20px;
text-align:center;
margin-bottom:20px;
display: inline-block;
margin: 0 auto;
}
.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
<div class="container">
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>
</div>
解决方案是将两个元素包装在父级div
中,然后将父级div居中。
我将你的两个元素包装在一个名为wrapper
的div中,然后引用了wrapper
元素,然后赋予它以下属性
#wrapper {
margin: 0px auto;
display: table;
}
margin: 0px auto;
将水平居中一个容器元素。
display: table;
将使父`div自动换行到组合子宽度。
#wrapper {margin: 0px auto; display:table;}
.grid_3 {
margin-top:20px;
text-align:center;
margin-bottom:20px;
display: inline-block;
margin: 0 auto;
}
.fmcircle_out {
margin:0 auto;
width: 200px;
height: 200px;
background: rgba(221,221,221,0.3);
text-align: center;
opacity: 0.5;
line-height:10px;
border-radius:5px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in img {
margin: 30px 25px 25px 25px;
width: 120px;
height: 120px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 53px;
width: 64px;
height: 64px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 50px;
line-height:20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
<div id="wrapper">
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>
</div>
如果你想集中2个div你需要将它们包装在父div中并给它一个width
然后将margin: 0 auto;
设置为如此:
HTML:
<div class="grid_wrapper">
<div class="grid_3">
<div class="fmcircle_out">
<a href="/article">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett artikkel</span><img src="/img/article.png" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="/event">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_blue">
<span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
</div>
</div>
</a>
</div>
</div>
</div>
CSS:
.grid_wrapper {
width:500px; //change this to whatever you want
margin: 0 auto;
}