如何在同一条线上有一个h1，p和一个img但是我的h1中心

Question

我想让我的h1居中，但是＆＃39; text-align＆＃39;不起作用。我和我的img在同一条线上，但它们与我的h1不在同一条线上。我是否需要逐个像素地手动移动以使我的H1居中？如果我有相同的显示器，他们为什么不在同一条线上呢？

＆＃13;

＆＃13;

.nav {
  font-family: 'Merriweather', serif;
  font-size: 11px;
  font-weight: bold;
  padding: 10px 0;
  line-height: 18px;
  background-color: #7D1935;
  margin: 0;
}
.nav h1 {
  color: #F5F3EE;
  text-align: center;
  display: inline-block;
}
.nav p {
  display: inline-block;
  color: #F5F3EE;
  font-size: 15px;
  padding: 10px;
  margin: 0;
  float: right;
}
.nav img {
  display: inline-block;
  padding-right: 10px;
  float: right;
}

＆＃13;

<div class="nav">
  <div class="container">
    <a href="#" target="_blank">
      <img src="http://fr.locita.com/wp-content/uploads/2011/12/facebook-logo1.jpg" height="30" width="30">
    </a>

    <p>stuff</p>

    <h1>text here</h1>


  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/ohtysfg6/1/

Answer 1

将text-align: center从h1移至.nav并且有效：

.nav {
  font-family: 'Merriweather', serif;
  font-size: 11px;
  font-weight: bold;
  padding: 10px 0;
  line-height: 18px;
  background-color: #7D1935;
  margin: 0;
  text-align: center;
}
.nav h1 {
  color: #F5F3EE;
  display: inline-block;
}

预览

小提琴：http://jsfiddle.net/ohtysfg6/4/