寻找一种解决方案，以将用户的个人资料图片保持在h1旁边，并且无论屏幕大小如何，都将其双方居中对齐。h1通过text-align居中，但是我无法弄清楚如何使img紧靠h1。此刻，img向左浮动，当我注释掉该float：left时，img居中，h1消失了。这是div的代码，分别包含img和h1，然后分别包含img和h1。
.biohead {
width: 100%;
position: fixed;
text-align: center;
display: block;
padding-bottom: 1%;
color: dimgray;
font-size: 2.5em;
box-shadow: 0 0 15px rgba(0, 0, 0, .2);
}
.biohead img {
height: 50px;
border-radius: 39px;
width: 50px;
margin-top: 5px;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
/*margin-left: 15%;*/
/*margin-right: 11px;*/
}
.biohead h1 {
/* float: left;
*/ margin: 0 auto;
margin-top: 10px;
}
和html：
<div class="biohead">
<img src="images/fisherman.png" alt="Raul">
<h1>Raul Pescadero</h1>
</div> <!--biohead-->
制作h1和imgdisplay: inline-block并删除浮点数。它们都将以text-align: centerdiv上的现有中心为中心。
另外，请将它们都设置为vertical-align: middle，因为默认baseline值可能会导致其他元素出现意外行为。
目前，包装div应该有合适的min-width尺寸，以免包装尺寸太小而导致折断线。
在此示例中，我从正文中删除了默认边距以及不需要的填充底部。
body {
margin: 0;
}
.biohead {
width: 100%;
position: fixed;
text-align: center;
display: block;
color: dimgray;
font-size: 2.5em;
box-shadow: 0 0 15px rgba(0, 0, 0, .2);
min-width: 600px;
}
.biohead img {
height: 50px;
border-radius: 39px;
width: 50px;
display: inline-block;
vertical-align: middle;
margin: 0 5px;
}
.biohead h1 {
display: inline-block;
vertical-align: middle;
}<div class="biohead">
<img src="http://www.placehold.it/50" alt="Raul">
<h1>Raul Pescadero</h1>
</div>
<!--biohead-->本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句