如何将表单置于 div 的中心

Question

大家好，我在 div 中有一个小表格，我已经将它居中但是带有它的 img 不能正确居中，它总是有点在顶部或底部我想要 h4/form/img 看起来好像他们在一行这里是代码：

.outer {
    display:block;
    width:1140px;
    margin:0 auto;
}

.inner {
    text-align:center;
    display:block;

}

body {
    background:#dee
}

form {
    margin:0px;
    display:inline;
    margin-top:10px;
}

img {
    display:inline;

}

h4 {
    display:inline;
    margin:0px;
    margin-top:10px;
}

HTML:

<div class="outer">
    <div class="inner">
        <h4>Personalize your experiance:
        </h4>
        <form>
            <input />
        </form>
        <img src="zip-icon.png">
    </div>
</div>

http://jsfiddle.net/mohamedkna/djhL2z27/

提前致谢

Answer 1

尝试使用对齐属性：

<div class="outer">
<div class="inner" align="center">
    <h4>Personalize your experiance:
    </h4>
    <form>
        <input />
    </form>
    <img src="zip-icon.png">
</div>

Answer 2

您需要将垂直对齐设置为 img:

img {vertical-align: middle}

http://jsfiddle.net/djhL2z27/4/

Answer 3

这样试试：Demo

CSS:

form {
    margin:0px;
    display:inline-block;   
    line-height:40px;
    vertical-align:middle;
}
img {
    display:inline;
    line-height:40px;
    vertical-align:middle;
}

Answer 4

你这里有问题：

.outer {
        display:block;
        width:1140px;
        margin:0 auto;
    }

改为：

.outer {
text-align:center !important;
            display:block;
            width:100%;
            margin:0 auto;
        }

.outer {
text-align:center !important;
   display:block;
   width:100%;
   margin:0 auto;
  }
  
  .inner {
   text-align:center 
   display:block;
   
  }
  
  body {
   background:#dee
  }
  form {
   margin:0px;
   display:inline;
   margin-top:10px;
  }
  
  img {
   display:inline;
   
  }
  
  h4 {
   display:inline;
   margin:0px;
   margin-top:10px;
  }

<div class="outer">
    <div class="inner">
         <h4>Personalize your experiance:
  </h4>

        <form>
            <input />
        </form>
        <img src="http://i.imgur.com/O9fPYk5.png">
    </div>
</div>

Answer 5

添加 vertical-align: middle 到 img 和表单。这应该或多或少地完成了工作。剩下的微调你可以做。

Answer 6

请更新css。所有内容都将根据您的需要居中

function useless() {
     alert(hello);   
}

.outer {
   display:block;
   max-width:1140px;
   margin:0 auto;
  }
  
  .inner {
   text-align:center;

   
  }
  
  body {
   background:#dee
  }
  form {
   margin:0px;
   display:inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
  }
  
  img {
   display:inline-block;
    vertical-align: middle;
   
  }
  
  h4 {
   display:inline-block;
    vertical-align: middle;
   margin:0px;
  }

<div class="outer">
    <div class="inner">
         <h4>Personalize your experiance:
  </h4>

        <form>
            <input />
        </form>
        <img src="http://i.imgur.com/O9fPYk5.png">
    </div>
</div>

Answer 7

另一种方法是使用负边距（不适用于 ie <8）

img {
        margin-bottom:-15px;
        display:inline;

    }

如何将表单置于 div 的中心

how to position a form centered within a div

html

css

layout