Question

我的网站标题中有一个搜索栏。它是div中的输入。我似乎无法弄清楚如何将搜索栏置于div的中间位置。我在响应性方面设置得非常完美，所以我不想改变它的定位方式，只需将它放在中心位置。任何帮助将不胜感激。

HTML：

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
  <div>
    <label hidden="true" for="s">Search for:</label>
    <input placeholder="I want to go see lighthouses" class="text" type="text" value="I want to go see lighthouses" name="I want to go see lighthouses" id="s" onfocus="(this.value == 'I want to go see lighthouses') && (this.value = '')" onblur="(this.value == '') && (this.value = 'I want to go see lighthouses')" />
    <input hidden="true" type="submit" class="submit" name="Submit" value="Search!" />
  </div>
</form>

CSS：

#searchform div {
  shadow: 4px 7px 4px #000000;
  position: absolute;
  width: 100%;
  bottom: 90px;
}

#searchform .text {
  font-family: 'Merriweather';
  background: white url('images/search-img.png') no-repeat;
  background-position: 96% center;
  font-size: 220%;
  color: #B7B7B7;
  border-radius: 50px;
  padding-left: 35px;
  height: 75px;
  width: 600px;
  max-width: 100%;
  display: inline-block;
  margin: 0 auto;
}

#searchform .text:focus {
  background-image: none;
}

#searchform .text img {
  margin-right: 25px;
}

Answer 1

将text-align添加到包装div以使内联内容居中。

   #searchform div {
     position: absolute;
     width: 100%;
     bottom: 90px;
     text-align: center/* Text align here */     
   }


   #searchform .text {
     font-family: 'Merriweather';
     background: white url('images/search-img.png') no-repeat;
     background-position: 96% center;
     font-size: 220%;
     color: #B7B7B7;
     border-radius: 50px;
     padding-left: 35px;
     height: 75px;
     width: 100%; /* Updated thiese two widths, better for your responsive design */
     max-width: 600px;
     display: inline-block;
     margin: 0 auto;
   }
   #searchform .text:focus {
     background-image: none;
   }
   #searchform .text img {
     margin-right: 25px;
   }

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
  <div>
    <label hidden="true" for="s">Search for:</label>
    <input placeholder="I want to go see lighthouses" class="text" type="text" value="I want to go see lighthouses" name="I want to go see lighthouses" id="s" onfocus="(this.value == 'I want to go see lighthouses') && (this.value = '')" onblur="(this.value == '') && (this.value = 'I want to go see lighthouses')"
    />
    <input hidden="true" type="submit" class="submit" name="Submit" value="Search!" />
  </div>
</form>

Answer 2

将#searchform div的CSS更改为：

#searchform div {
  shadow: 4px 7px 4px #000000;
  position: absolute;
  width: 100%;
  bottom: 90px;
  text-align: center;
}

DEMO

Answer 3

只需将div中的文本（包括内联和内联块元素）对齐到中心。

#searchform div {
  position: absolute;
  width: 100%;
  bottom: 90px;
  text-align:center;
}

Jsfiddle Demo

Answer 4

尝试text-align: center代表“＃searchform div`

Answer 5

将display: inline-block更改为block。

#searchform .text {
  font-family: 'Merriweather';
  background: white url('images/search-img.png') no-repeat;
  background-position: 96% center;
  font-size: 220%;
  color: #B7B7B7;
  border-radius: 50px;
  padding-left: 35px;
  height: 75px;
  width: 600px;
  max-width: 100%;
  display: inline-block; //change this to block
  margin: 0 auto;
}

检查一下 - http://codepen.io/anon/pen/dGPQjZ?editors=110

麻烦在div中居中搜索栏

5 个答案: