如何将标题（带有文本和图像）居中到我的div？

Question

我对编码非常非常新，我试图将一个标题集中在一个div中。我设法以某种方式集中，但它并不是完全对称的，也不明白为什么。谁能帮我？这是我的代码：

＆＃13;

＆＃13;

#up {
  width: 1200px;
  height: 100px;
  float: center;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  background-color: powderblue;
  align-items: center;
  justify-content: center
}

＆＃13;

<div id="up">
  <h1 class="arial" align="center" style="color:white"> NOT ANOTHER <img src="logo t shirt.png" style="vertical-align: middle; width:90px; height:90px" ;>T-SHIRT STORE </h1>
</div>

＆＃13;

＆＃13;

＆＃13;

这是它的外观，h1不是对称的垂直居中

Answer 1

将line-height: 100px添加到#up解决您的问题。

#up {
  width: 1200px;
  height: 100px;
  line-height: 100px;
  float: center;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  background-color: powderblue;
  align-items: center;
  justify-content: center
}

<div id="up">
  <h1 class="arial" align="center" style="color:white"> NOT ANOTHER <img src="logo t shirt.png" style="vertical-align: middle; width:90px; height:90px" ;>T-SHIRT STORE </h1>
</div>

Answer 2

在你的css中添加以下属性。

 myMap.collect {
    case ("city", Some(city)) if(city.contains("York")) => "NewYork"
    case (k, v) if v.isDefined => k -> v.get
  }

这将使所有内容都出现在div中间。

Answer 3

当您使用align-items，justify-content属性时，只需将display添加为flex，如果需要，将宽度添加到100％。

  

align-items - 当项目不使用横轴上的所有可用空间时，垂直对齐灵活容器的项目。

     

justify-content - 当项目不使用主轴上的所有可用空间时，水平对齐灵活容器的项目。

当所选元素的显示为flex时，以下属性有效。

＆＃13;

＆＃13;

#up {
  width: 100%;
  /*You could even change width to 1200px and it still align the  child element at center of screen*/
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: powderblue;
  display:flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div id="up">
  <h1 class="arial" align="center" style="color:white"> NOT ANOTHER <img src="logo t shirt.png" style="vertical-align: middle; width:90px; height:90px" ;>T-SHIRT STORE </h1>
</div>

＆＃13;

＆＃13;

＆＃13;