Question

我无法移动div（.searchblock）。我希望它位于标题的中心。

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

在有问题的div上，我尝试过以下位置：固定，绝对，相对。我尝试将div的中心设置为margin：auto和其他各种值。我也尝试过在所有方向上移动div（位置：绝对，顶部：50像素，右侧100-1000像素等）。似乎对其定位没有影响。

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

sudo kubectl expose deployment kubernetes-dashboard
Error from server (NotFound): deployments.extensions "kubernetes-dashboard" not found

我怎么解决这个问题？我无法定位或居中放置DIV

2 个答案: