我有一组非常基本的 % 宽度 div。我正在尝试将元素置于 <div class="media-top-center">
中.
这是HTML和CSS代码;
HTML
<div class="media-top-wrapper">
<div class="media-top-left">
Posted by <a href="<%= uploader.profilePath %>"><%= uploader.name %></a> from <a href="<%= attribution %>"><%= attribution_name %></a>
</div>
<div class="media-top-center">
<div class="top-center media-card-avatar-round" style="background-image:url('<%= uploader.avatar %>');"></div>
</div>
<div class="media-top-right">
<div class="heart"></div>
<div class="repost"></div>
<div class="flag"></div>
</div>
</div>
CSS
.media-top-wrapper{
max-width: 100%;
margin: 0 auto;
}
.card-media-top-wrapper{
max-width: 100%;
margin: 0 auto;
}
.media-top-left,
.media-top-right{
width: 36%;
float: left;
box-sizing: border-box;
}
.media-top-center{
width: 28%;
float: left;
box-sizing: border-box;
}
.card-media-top-left,
.card-media-top-right{
width: 50%;
float: left;
padding: 0 0.5em 0.25em 0.5em;
box-sizing: border-box;
}
.media-top-left{
padding-top: 1em;
text-align: left;
}
.media-top-center{
text-align: center;
}
.media-top-right{
text-align: right;
}
.top-center{
margin: 0 auto !important;
}
我以前用 margin: 0 auto
居中过东西, 非常基本。但在这种情况下,它不起作用。请帮忙。
最佳答案
我是 display: flex;
的 BIG 粉丝。我认为你应该调查一下。这是我最喜欢的居中指南,最简单的方法是使用 display flex
。
https://css-tricks.com/centering-css-complete-guide/
它甚至会引导您通过类似流程图的体验来获得您想要的东西。
所以你可以根据你的标准做这样的事情,确切地说:
.media-top-wrapper {
display: flex;
justify-content: space-around;
}
关于html - Div不居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20892045/