html - 使用 bootstrap 在行内将 2 张图片彼此居中

标签 html css twitter-bootstrap

enter image description here

如何将 2 个应用程序下载链接图像放在 class="row" 的中间?

<div class="container">
        <div class="row">
            <div class="col-xs-4" style="text-align:right"><img     src="images/bear.png" alt="bear" /></div>
            <div class="col-xs-8 first-row-second-column">
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">Καλώς ήρθατε, στα </h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12" style="text-align:center">Κάνε σήμερα τη συνδρομή σου και κέρδισε7 ΜΕΡΕΣ ΔΩΡΕΑΝ</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">Αν είσαι στην Ελλάδα στείλε τώρα SMS από το κινητό σου ZOU στο 54790 και μπες στον κόσμο των Ζουζουνιών.</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">Αν ζεις στο εξωτερικό κάνε την συνδρομή σου μέσα από την εφαρμογή.</h3>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div><img src="images/app_store_logo.png" alt="app_store_logo" /></div>
                <div><img src="images/google_play_logo.png" alt="google_play_logo" /></div>
            </div>
        </div>
    </div>

最佳答案

如果没有示例 fiddle 之类的东西,我不确定这会是什么样子,但我想这会给你想要的东西。

<div class="container">
        <div class="row">
            <div class="col-xs-4" style="text-align:right"><img     src="images/bear.png" alt="bear" /></div>
            <div class="col-xs-8 first-row-second-column">
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">Καλώς ήρθατε, στα </h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12" style="text-align:center">Κάνε σήμερα τη συνδρομή σου και κέρδισε7 ΜΕΡΕΣ ΔΩΡΕΑΝ</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">Αν είσαι στην Ελλάδα στείλε τώρα SMS από το κινητό σου ZOU στο 54790 και μπες στον κόσμο των Ζουζουνιών.</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">Αν ζεις στο εξωτερικό κάνε την συνδρομή σου μέσα από την εφαρμογή.</h3>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4"></div>
            <div class="col-xs-8">
                <img src="images/app_store_logo.png" alt="app_store_logo" />
                <img src="images/google_play_logo.png" alt="google_play_logo" />
            </div>
        </div>
    </div>

这应该通过删除包含它们的 div 将两个图像放在一起,并使用 bootstrap 在第二行创建一个空列,以与上面的熊匹配。如果图像距离太近,您可能需要在 CSS 文件中设置边距规则。

关于html - 使用 bootstrap 在行内将 2 张图片彼此居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33152830/

相关文章:

java - 悬停时 slider 元素 OUT

html - 奇怪的填充

javascript - 使用 Javascript 暂时增加元素的宽度和高度,同时保持其居中位置

jquery - 使用 jquery 将类添加到确定的 HTML 结构模式

html - 使用 Bootstrap 创建居中表格

jquery - 如何在 mvc4 web api 中使用 &lt;script&gt; 标签设置值?

javascript - Bootstrap 导航栏切换按钮不起作用

html - 使用媒体查询在手机上重新定位 Logo

javascript - 每年在仪表板中显示的数字从 1 开始

javascript - 使用 Leap 运动执行手势时在 X3DOM 中模拟鼠标单击