HTML/CSS 图片居中对齐 [英] HTML/CSS Image center alignment

查看：31
本文介绍了HTML/CSS 图片居中对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我制作了一个网站，其主页如下所示:

我想将 ficstore 标志移到中间，将横条分成两半，两边各放一个，如下所示:

我已将条形图的每一侧分成两个不同的部分，并尝试将这些图像放在不同的列中.但它似乎不起作用.

这是当前代码的片段:

<div class="row"><div class="col-xs-8"><h2 style="font-family:helvetica;"><span>主页</span></h2>
<div class="col-xs-4"><img src="http://lorempixel.com/400/200/" class="img-responsive right" style="width:400px; z-index:1;"/>

<img src="http://lorempixel.com/400/200/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;"/>

<hr class="style18"/>

有人可以帮忙吗?

我也尝试过以下代码:

<div class="row"><div class="col-xs-8"><h2 style="font-family:helvetica;"><span>图书信息</span></h2>
<div class="flex-row"><div><img src="http://lorempixel.com/400/200/" class="img-responsive right" style="width:400px; z-index:1;"/>

<div><img src="http://lorempixel.com/400/100/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;"/>

<div><img src="http://lorempixel.com/400/100/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;"/>

<hr class="style18"/>

CSS:

.flex-row {显示:弹性；对齐项目:居中；对齐内容:居中；}

解决方案

我建议你必须有 3 张图片.酒吧应该分成两部分.将Fictore 放在中间，然后添加display:block.

I have made a website where the homepage looks like the this :

I want to move the ficstore logo in the middle and split the bar into two halves and put one on either side , like this :

I've split my bar image into two different parts for each side and tried to put the images in different columns. But it just doesn't seem to work.

This is the snippet for the current code :

<div class="container">
    <div class="row">
        <div class="col-xs-8">
                        <h2 style="font-family:helvetica;"><span>Home Page</span></h2>

        </div>
        <div class="col-xs-4">
            <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="width:400px; z-index:1;" />
        </div>
        <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
    </div>
<hr class="style18" />

Can someone help?

I've tried the following code as well :

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <h2 style="font-family:helvetica;"><span>Book Info</span></h2>
        </div>
        <div class="flex-row">
            <div>
                <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="width:400px; z-index:1;" />
            </div>
            <div>
                <img src="http://lorempixel.com/400/100/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
            </div>
            <div>
                <img src="http://lorempixel.com/400/100/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
            </div>
        </div>
    </div>
<hr class="style18" />

Css :

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

解决方案

I suggest you have to have 3 images. The bar should divided in two. Put the Fictore in the middle then add display:block.

这篇关于HTML/CSS 图片居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆