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

您需要将vertical-align设置为img：

img {vertical-align: middle}

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

Answer 2

尝试这样：Demo

CSS：

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

Answer 3

在img和form中添加vertical-align：middle。这应该或多或少地完成这项工作。你可以做其余的微调。

Answer 4

尝试使用align属性：

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

Answer 5

你有问题：

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

更改为：

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

＆＃13;

.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;
		}

＆＃13;

<div class="outer">
    <div class="inner">
        	<h4>Personalize your experiance:
		</h4>

        <form>
            <input />
        </form>
        <img src="http://i.imgur.com/O9fPYk5.png">
    </div>
</div>

＆＃13;

Answer 6

请更新css。所有内容都将根据您的需要放在中心位置

＆＃13;

function useless() {
     alert(hello);   
}

＆＃13;

.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;
		}

＆＃13;

<div class="outer">
    <div class="inner">
        	<h4>Personalize your experiance:
		</h4>

        <form>
            <input />
        </form>
        <img src="http://i.imgur.com/O9fPYk5.png">
    </div>
</div>

＆＃13;

Answer 7

另一种方法是使用负边距（对于＆lt; 8不好）

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

    }

如何定位以div为中心的表单

7 个答案: