Question

我找到了以下解决方案，用于在img

内垂直对齐div

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

这对于一个基本的例子非常有用。但是，我不得不对此进行扩展，我希望row包含两个bootstrap col-md-6列。在第一列中我想要256px图像，在第二列中我想要一个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;
}

问题是现在第二列不再包含，文本不会换行并向右移动。

如何将第一列中的图像与右列中的文本对齐，并在第二列中获得正确的包装？

Fiddler：https://jsfiddle.net/Camuvingian/1sc40rm2/2/

Answer 1

你的HTML需要更新，在Bootstrap中，div命令应该总是去.container＆gt; .row＆gt; .col- * - *，你的代码却去了.container＆gt; .row＆gt; .frame＆gt; .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 - Updated & working code

这也解决了在p标签上的自动换行问题。

CSS：

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

在Div HTML和CSS中垂直对齐Img

1 个答案: