Question

我有一个带引导程序的产品说明。现在我希望它与图像对齐。漂浮左边不起作用。我的形象很大，所以我希望它是垂直对齐的。在这里你可以找到一支笔：

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

Answer 1

你应该放render({children} = this.props) { return ( <View style={styles.container}> <View style={styles.tabsContainer}> {children.map(({ props: { title } }, index) => <TouchableOpacity style={[ // Default style for every tab styles.tabContainer, index === this.state.activeTab ? styles.tabContainerActive : [] ]} // Change active tab onPress={() => this.setState({ activeTab: index }) } // Required key prop for components generated returned by map iterator key={index} > <Text style={styles.tabText}> {title} </Text> </TouchableOpacity> } </View> <View style={styles.contentContainer}> {children[this.state.activeTab]} </View> </View> ); };＆amp;在包装器div中ul然后将img + display: inline-block添加到每个。
并将图片放在vertical-align: middle

“Wickelkommode”的例子：

http://codepen.io/cyril-lamotte/pen/evqKxx

Answer 2

你可以试试这个：

<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>

你将在同一行创建两个div，第一个存储图像，第二个存储无序列表。

在css中：

.row {
display:flex;
}
.img-bett, .bett-div {
    flex: 1;
}

ul.bett {
    position: absolute;
    top: 25%;
    bottom: 25%;
    display: block;
    height: 50%;
}

display flex允许您更改两个子div的高度 flex：1使两个div共享最大高度。 ul的位置和高度也为他在父div的中间留出了空间。

将无序列表与图像对齐

2 个答案: