[英]put a div in center and align an image to its “left” side
<div class="container">
<div class="header">
<img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"/>
<span class="text">Title Here</span>
</div>
</div>
I am trying to put the "Title" in center and then place the logo, next to it in the left side of it. 我试图将“标题”放在中间,然后将徽标旁边的徽标放在左侧。
The title name would be dynamic so it should always be at the center irrespective of length 标题名称将是动态的,因此无论长度如何,标题名称始终应居中
Change CSS 变更CSS
.container{
padding: 15px 15px 20px 15px;
height: 247px;
width: 780px;
border-radius: 5px;
margin-bottom: 30px;
background-color: #2D343D;
}
.logo {
width: 55px;
float:left;
vertical-align:middle;
}
.header {
height: 56px;
color: #FFFFFF;
margin-top: 15px;
font-size: 29.98px;
letter-spacing: 0.43px;
line-height: 40px;
text-align:center;
position: relative;
}
Try 尝试
.container{
padding: 15px 15px 20px 15px;
height: 247px;
width: 780px;
border-radius: 5px;
margin-bottom: 30px;
background-color: #2D343D;
}
.logo {
width: 55px;
vertical-align:middle;
}
.header {
height: 56px;
color: #FFFFFF;
margin-top: 15px;
font-size: 29.98px;
letter-spacing: 0.43px;
line-height: 40px;
text-align: center;
position: relative;
}
Is this how you want it to be? 这就是您想要的样子吗?
.container { padding: 15px 15px 20px 15px; height: 247px; width: 780px; border-radius: 5px; margin-bottom: 30px; background-color: #2D343D; position: relative; } .logo { width: 55px; vertical-align: bottom; } .header { height: 56px; color: #FFFFFF; margin-top: 15px; font-size: 29.98px; letter-spacing: 0.43px; line-height: 40px; text-align: center; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); }
<div class="container"> <div class="header"> <img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" /> <span class="text">Title Here</span> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.