Question

Here is the demo code

<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>

我试图将“标题”放在中间，然后将徽标放在徽标的左侧。

标题名称将是动态的，因此无论长度如何，标题名称始终应居中

Answer 1

更改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;
}

http://jsfiddle.net/d902fzyn/

Answer 2

尝试

this demo

.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;
}

Answer 3

这就是你想要的样子吗？

 package com.web.servlets;

.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放在中心并将图像对齐到其“左侧”

3 个答案: