在Div HTML和CSS中垂直對齊圖

Question

我發現以下在div垂直對齊img解決方案

https://stackoverflow.com/a/7310398/626442

這對於一個基本示例非常有用。 不過，我已經不得不延長這一點，我希望有一個row有兩個bootstrap col-md-6在其列。 在第一列中，我想要一個256像素的圖像，在第二列中，我想要一個h1 ， p和一個按鈕。 我必須遵循HTML：

<div class="home-costing container">
    <div class="row">
        <div class="frame">
            <span class="helper"></span>
            <div class="col-md-6">
                <img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" />
            </div>
            <div class="col-md-6">
                <h2>Header</h2>
                <p>
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br /><br/>
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                </p>
                <a class="btn btn-default"
                   href='@Url.Action("Index", "Products")'
                   role="button">
                    Learn More
                </a>
            </div>
        </div>
    </div>
</div>

和以下CSS：

.home-costing {
   color: #fff;
   text-align: center;
   padding: 50px 0;
   border-bottom: 1px solid #ff6500;
}

.home-costing h2 {
   text-transform: uppercase;
   font-size: 60px;
}

.home-costing p {
   font-size: 18px;
}

.home-costing .frame {
   height: 256px;
   width: 256px;
   border: 0;
   white-space: nowrap;
   text-align: center; 
   margin: 1em 0;
}

.home-costing .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.home-costing img {
    vertical-align: middle;
    max-height: 256px;
    max-width: 256px;
}

問題在於，現在不再包含第二列，並且文本也不會自動換行並移到右側。

如何將第一列中的圖像與右列中的文本居中對齊，而第二列中仍能得到正確的換行？

提琴手： https : //jsfiddle.net/Camuvingian/1sc40rm2/2/

Answer 1

您的HTML需要更新，在Bootstrap中，div順序應始終為.container> .row> .col- *-*，但是您的代碼為.container> .row> .frame> .col- *-*。 我已經更正了您的HTML，現在您的代碼可以了。

HTML：

<div class="home-costing container">
    <div class="row">
            <div class="col-md-6">
                <img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" class="center-block" />
            </div>
            <div class="col-md-6">
                <h2>UserCost</h2>
                <p>Hello, I'm a paragraph</p>
                <a class="btn btn-default"
                   href='@Url.Action("Index", "Products")'
                   role="button">
                    Learn More
                </a>
            </div>
        </div>
    </div>
</div>

鏈接到完成的代碼示例： Codepen-更新和工作代碼

這也解決了p標簽上的自動換行問題。

CSS：

p {
   font-size: 18px;
    word-wrap: break-word;
}