居中标题内容div

Question

我无法将名为'one'和'two'的div居中。他们需要保持自己的风格，使它们保持并排和边缘，但也要居中，这是我无法解决的问题？

此外，导航器需要居中，这是我用下面的样式实现的。

＆＃13;

＆＃13;

#header {
  position: relative;
  overflow: hidden;
  min-width:300px;
  height:auto;
  text-align: center;
  border-bottom:1px solid  #ccc;
  padding-bottom:5px;
  margin: 0 5px 0 5px;
}
#header #one {
		font: 1.625em "Arial Black", Helvetica, sans-serif;
		font-weight:100;
		float: left;
		color:#95061e;
		margin-bottom:10px;
	}
#header #two {
		font:1.625em Arial, Helvetica, sans-serif;
		float:left;
		margin-top:3px;
		margin-left:3px;
		margin-right:5px;
		color:#953606;
	}

＆＃13;

  <div id="header">
    <div id="one">Birch</div>
    <div id="two">Wood</div>
      <div class="nav_active"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用display:inline-block;代替float:left;。

＆＃13;

＆＃13;

#header {
  position: relative;
  overflow: hidden;
  min-width:300px;
  height:auto;
  text-align: center;
  border-bottom:1px solid  #ccc;
  padding-bottom:5px;
  margin: 0 5px 0 5px;
}
#header #one {
		font: 1.625em "Arial Black", Helvetica, sans-serif;
		font-weight:100;
		display:inline-block;
		color:#95061e;
		margin-bottom:10px;
	}
#header #two {
		font:1.625em Arial, Helvetica, sans-serif;
		display:inline-block;
		margin-top:3px;
		margin-left:3px;
		margin-right:5px;
		color:#953606;
	}

＆＃13;

  <div id="header">
    <div id="one">Birch</div>
    <div id="two">Wood</div>
      <div class="nav_active"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用此代码：

#header {
  position: relative;
  overflow: hidden;
  height:auto;
  text-align: center;
  border-bottom:1px solid  #ccc;
  padding-bottom:5px;
  margin: 0 auto;
}
#header #one {
        font: 1.625em "Arial Black", Helvetica, sans-serif;
        font-weight:100;
        color:#95061e;
        margin-bottom:10px;display:inline-block;
    }
#header #two {
        font:1.625em Arial, Helvetica, sans-serif;margin-top:3px;
    display:inline-block;
        color:#953606;
    }

jsfiddle link click here

Answer 3

删除css中的浮动，如下所示。 https://jsfiddle.net/dy8bzuv3/

如果您想将两个div放在一行中，只需将display:inline;添加到#one的css规则以及#two

Answer 4

祝你学习愉快！我在此处所做的更改是#one和#two div被赋予display:inline。这会将它们视为与文本类似，因此text-align选项适用于它们。

＆＃13;

＆＃13;

#header {
  position: relative;
  overflow: hidden;
  min-width:300px;
  height:auto;
  text-align: center;
  border-bottom:1px solid  #ccc;
  padding-bottom:5px;
  margin: 0 5px 0 5px;
}
#header #one {
		font: 1.625em "Arial Black", Helvetica, sans-serif;
		font-weight:100;
		color:#95061e;
		margin-bottom:10px;
  display: inline;
	}
#header #two {
		font:1.625em Arial, Helvetica, sans-serif;
		margin-top:3px;
		margin-left:3px;
		margin-right:5px;
		color:#953606;
  display: inline;
	}

＆＃13;

<div id="header">
    <div id="one">Birch</div>
    <div id="two">Wood</div>
      <div class="nav_active"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
      <div class="nav_inactive"><A href="#"></A></div>
  </div>

＆＃13;

＆＃13;

＆＃13;