我该如何解决这个问题？我无法定位或集中我的DIV

Question

我无法移动div (.searchblock)。我希望它在标题中居中。

附带问题:是否有一种简单的方法可以使标题和正文的内容对齐到相同的宽度？

在这个问题上，我尝试了立场:固定的，绝对的，相对的。我试过在div中间加上边距: auto和其他各种值。我试着向各个方向移动div (位置:绝对，顶部:50 in，右100-1000 in，等等)。也是。似乎没有什么对它的定位有影响。

​

html {
  background-color: #e9ebee;
}

body {
  margin: 0;
}

.header {
  background-color: #4267B2;
  #4267b width: 100%;
  height: 42px;
}

#search {
  color: gray;
  height: 24;
}

input[type=image] {
  height: 24;
  padding: 0px;
}

.searchblock {
  position: absolute;
  left: 1000px;
}

#profile {
  border-radius: 10px;
}

ul,
.bttn {
  color: white;
  list-style-type: none;
  display: inline-block;
}

li {
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  padding: 0 10px 1px;
  border-right: solid 1px gray;
}

button {
  border: none;
  padding: 0;
  margin: 0;
}

.footer {
  position: fixed;
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: #2851A3;
  margin: 0;
}

<div class="header">
  <div class="searchblock"></div>
  <img id="logo" src="facebook.png" height="24" width="24">

  <input id="search" type="text" name="search" value="search">
  <input type="image" name="submit" src="maglass.png">
  <img id="profile" src="blacwhit.jpg" height="24" width="24">
  <ul>
    <li>Create</li>
    <li>Find Friends</li>
    <li>Home</li>
    <li>Anthony</li>
  </ul>

  <div class="bttn">
    <button type="button"><img src="messages.png"height="24" width="24"> 
    </button>
    <button type="button"><img src="frequest.png"height="24" width="24"> 
    </button>
    <button type="button"><img src="alerts.png"height="24" width="24"> 
    </button>
    <button type="button"><img src="acct.png"height="24" width="24"></button>
    <button type="button"><img src="help.png"height="24" width="24"></button>
    <button type="button"><img src="dropdown.png"height="24" width="24"> 
    </button>
  </div>
</div>

​

我希望DIV在标题中居中。

Answer 1

我希望DIV在标题中居中。

您可以使用flexbox对元素进行居中。如下所示：

.header {
  background-color: #4267B2;
  width: 100%;
  height: 42px;

  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 2

试试这个代码..。它也适用于十字绣者..。

css

.header {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}