Html 将无序列表与图像对齐

我有一个产品介绍与引导。现在我想让图像与图像对齐。向左浮动不起作用。我的图像太大了，所以我想垂直对齐。在这里你可以找到一支钢笔：

`https://codepen.io/anon/pen/WpVydZ`

您应该将

ul

和

img

放在包装器div中，然后将

display:inlineblock

+

vertical align:middle

添加到每个包装器div中

并将图像置于

ul

“Wickelkommode”示例：

您应该将

ul

和

img

放在包装器div中，然后将

display:inlineblock

+

vertical align:middle

添加到每个包装器div中

并将图像置于

ul

“Wickelkommode”示例：

您可以尝试以下方法：

<div class="col-lg-6 sm-12">
        <div class="row">
            <div class="img-bett col-sm-6">
                <img alt="" src="https://www.mixibaby.de/item/images/1003028/300x300/1003028-felix-grau-bett.jpg" style="width: 300px; height: 300px;">
            </div>

            <div class="bett-div col-sm-6">
                <h3>Bett</h3>
                <ul class="bett">   
                    <li>3-fach höhenverstellbarer Lattenrost (von 21cm auf 36cm und 52cm)</li>  
                    <li>Liegefläche: 70cm x 140cm)</li> 
                    <li>Gesamtmaße L/B/H: ca. 145cm x 77cm x 85cm</li>
                    <li>3Bodenfreiheit: ca. 8,5cm</li>
                </ul>
            </div>
        </div>
    </div>

display flex允许您更改两个子div的高度 弹性：1使两个div共享最大高度。 此外，UL的位置和高度为他在母体中间的位置提供了空间。

< P>你可以试试这个：

<div class="col-lg-6 sm-12">
        <div class="row">
            <div class="img-bett col-sm-6">
                <img alt="" src="https://www.mixibaby.de/item/images/1003028/300x300/1003028-felix-grau-bett.jpg" style="width: 300px; height: 300px;">
            </div>

            <div class="bett-div col-sm-6">
                <h3>Bett</h3>
                <ul class="bett">   
                    <li>3-fach höhenverstellbarer Lattenrost (von 21cm auf 36cm und 52cm)</li>  
                    <li>Liegefläche: 70cm x 140cm)</li> 
                    <li>Gesamtmaße L/B/H: ca. 145cm x 77cm x 85cm</li>
                    <li>3Bodenfreiheit: ca. 8,5cm</li>
                </ul>
            </div>
        </div>
    </div>

display flex允许您更改两个子div的高度 弹性：1使两个div共享最大高度。

---

此外，UL的位置和高度为他在父母的中间位置提供了空间。

首先感谢你的回答。现在我有一个问题，我的UL与我的形象不一致。链接在这里：

Bett

是

ul

的子项，这是无效的代码，只有

li

作为

ul

的直接子项有效。。。将其移到前面或用

li

将其包装。这是真的，我从上面链接中的代码中复制粘贴了它，已经在第一时间更正。谢谢你的回答。现在我有一个问题，我的UL与我的形象不一致。链接在这里：

Bett

是

ul

的子项，这是无效的代码，只有

li

作为

ul

的直接子项有效。。。将其移动到前面或将其包装在

li

中这是真的，我从上面链接中的代码复制粘贴了它，已经更正了hmmm。。现在我所有的div都不在一条直线上。。。好的，不要把

清除：两个
都放在你的colsOMG上。。。谢谢：
Bett
是
ul
的子项，这是无效的代码，只有
li
作为
ul
的直接子项有效。。。将其移动到前面或将其包装在
li
hmmm。。现在我所有的div都不在一条直线上。。。好的，不要把
清除：两个
都放在你的colsOMG上。。。谢谢：
Bett
是
ul
的子项，这是无效的代码，只有
li
作为
ul
的直接子项有效。。。将其移动到
li
之前或将其包裹在
Bett
中是
ul
的子级，这是无效的代码，只有
li
作为
ul
的直接子级有效。。。将其移动到
li
之前或将其包裹在
Bett
中是
ul
的子级，这是无效的代码，只有
li
作为
ul
的直接子级有效。。。将其移动到前面或用
li