Question

我正在尝试将图像放在同一行中的文本居中，并将文本与行的其余部分对齐，但不会居中到浏览器的中心。

这是JSFiddle - http://jsfiddle.net/Hdn9w/1/

我知道我可以改变：

.text1
{
    line-height: 450%;
    font-size: 30px;
    font-family: David;
    text-align: center;
}

为：

.text1
{
    line-height: 450%;
    font-size: 30px;
    font-family: David;
    margin-left: 550px;
}

但这不适用于不同的浏览器和iphone和东西，我很确定它是可能的，但我似乎无法找到它。我假设它像“显示”或“位置”或“溢出”，但似乎没有任何作用..

提前致谢。

代码是：

<body>
    <div class="container">

        <div class="header">

            <div class="logo">
                <img src="http://www.saludmedellin.com/wp-content/uploads/2014/01/dfd1.jpg" />
            </div>

            <div class="text1">
                Stocks Trader
            </div>

        </div>

        <div class="bodier">
            <form>
                <input type="text" />
                <input type="submit" />
            </form>
        </div>

    </div>


</body>

和css：

body
{
    background-color: #c4dbe5;
}

.header
{
    background-color: #5a9ab7;
    border-radius: 10px;
    height: 100px;
}

.logo img
{
    width: 80px;
    height: 80px;
    float: left;
    padding: 10px;
}

.text1
{
    line-height: 450%;
    font-size: 30px;
    font-family: David;
    text-align: center;
}

Answer 1

在所有情况下，使用像素作为行高而不是百分数。

.text1
{
    line-height: 100px;
    font-size: 30px;
    font-family: David;
    text-align: center;
}

部分演示：

http://jsfiddle.net/pyLSg/

Answer 2

具体来说，您想要使用这些像素尺寸的原因是因为您需要与正在排列的对象的实际高度相匹配。

http://jsfiddle.net/mori57/Hdn9w/5/

.logo {
    float:left;
    /* I'd suggest floating the container, not the image */
}

.logo img
{
    width: 80px;
    height: 80px;
    margin: 10px; /* also, use margin, not padding, on an img */
    /* remember that total height of this object is: 
          10px (top margin) +
          80px (image) +
          10px (bottom margin) == 100px */
}

.text1
{
    line-height: 100px; /* Your line-height should match the 
                           total height of your .logo img */
    font-size: 30px;
    font-family: David;
    text-align: center;
}

Answer 3

也许你想要这个：

- 水平/垂直对齐标题： - 还要在小屏幕上隐藏徽标，这样就不会妨碍它。

http://jsfiddle.net/luckmattos/Hdn9w/6/

CSS修改：

body
{
    background-color: #c4dbe5;
}

.header
{
    background-color: #5a9ab7;
    border-radius: 10px;
    height: 100px;
    position:relative;
}

.logo img
{
    width: 80px;
    height: 80px;
    float: left;
    padding: 10px;
}

.text1
{
    line-height: 100px;
    font-size: 30px;
    font-family: David;
    text-align: center;
    position:absolute;
    left:0px;
    right:0px;
}

@media (max-width:480px){
.logo {
    display:none;
}
}

将文本与中心对齐，同一行上的图像

3 个答案: