居中图片和文字在同一行

最新推荐文章于 2024-02-29 14:16:01 发布

原创最新推荐文章于 2024-02-29 14:16:01 发布 · 2.5k 阅读

8 ·

CC 4.0 BY-SA版权

本文详细介绍了使用CSS实现图片和文字水平居中、垂直居中以及水平垂直居中的多种方法，包括绝对定位、transform、Flexbox、表格布局等，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：http://www.cnblogs.com/thislbq/p/5882105.html

水平居中：

1. 行内元素：通过对父元素加 text-align:center （块级元素：自身加 text-align:center）

行内只有这一种方法，如果要用以下方式可以display：block即可

（text-align:center只对行内元素有效）（块级元素文本居中直接在块级元素上面加就行，其内部的文字（类似于行内元素）也会居中）

2. 块级元素：width:200px;margin:0 auto;

设置margin-left和margin-right同时设置为auto来使其居中。此时元素中必须定义有width，否则填满宽度，谈不上水平居中。

3. margin-left:50%;transform:translateX(-50%)

4. 绝对定位 left：50% ;transform:translateX(-50%)

5. 绝对定位 left:0; right:0; margin:auto; (利用左右外边距，与2类似)

多个块级元素：多个块级一列居中，直接全部块元素margin：0 auto（需要设置宽度）

display

一行多个块级元素

#outerDiv：{ text-align: center; }

#outerDiv div{
display: inline-block;
}

元素宽度超过一行时，自动变成一列居中排列

flex

一行多个块级元素

#outerDiv{

display: flex;

justify-content: center;

}

一列多个块级元素

#outerDiv3{
   display: flex;
    flex-direction:column;
    align-items: center;
}

垂直居中：

（1）绝对定位和transform/负margin

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

如果高度已知，可以直接margin-top: 负一半高度;

这里原来想的是不需要绝对定位呀，子元素设置margin-top父亲高度的一半，再translateY。然后发现效果不对。因为margin-top：50%，参考的其实是父元素的宽度而不是高度！

也可以改变布局：writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。

用top：50%，配合transform:translateY(-50%)就没有这个问题，可以完美的实现垂直居中。

（2）flex:对父元素设置display:flex;align-items: center;

或者是display:flex;justify-content: center; flex-direction: column;（即改变了主轴方向）

（3）line-hight等于height（只能单行，因为一行就是元素高度，多出来会溢出到元素外面）

height: 100px; line-height: 100px;

（4）table内：设置vertical-align:middle

#box {
     display: table;
}
#child {
   display: table-cell;
   vertical-align: middle;
}

注意：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>这样的元素是不行的。valign属性有四种：top：对内容进行上对齐；middle：对内容进行居中对齐；bottom：对内容进行下对齐；baseline：基线对齐

（5）通过对父元素设置上下相等的padding。对于单行多行均有效。（不能设置height，应由其内部行内元素撑开。否则内部元

素无法占满全部height，看起来还是不垂直居中）

div {

padding: 100px 0;

}

水平垂直居中：

绝对定位和transform/负margin

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

（2）flex

.parent {

display: flex;

justify-content: center;

align-items: center;

}

（3）绝对定位和margin:auto

.parent {

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

margin: auto;

}

（4）表格内

#box {
display: table;
}

#child {

width: 50%;

margin: 0 auto
display: table-cell;
vertical-align: middle;
}

图片水平垂直居中

使用 line-height 和 vertical-align

.parent {

width: 500px;

height: 300px;

line-height: 300px;

}

img{ vertical-align: middle; }

图片文字垂直居中

给图片添加CSS属性：vertical-align:middle;

<div>

</div>

2. 把图片作为背景：（需要已知高度，只适用于单行文字）如果你的图片只是用来作为小图标放在文字的左侧，那就推荐用这个方法。

<div style="height:60px;line-height:60px; padding-left:65px;

background:url(xxx) no-repeat left center">
<span>文字</span>
</div>

3.图片和文字设置左浮动，文字加line-height（需要已知高度，只适用于单行文字）(需要设置最小宽度，否则自适应有时会挤成两行)

4.文字相对容器绝对定位（可以多行文字）

5.(和方法1类似)图片和文字都包裹div，对div操作display: inline-block，图片vertical-align: middle（只适用于单行文字）

可继承：

字体系列属性 font
文本系列：text-align文本水平对齐。line-height：行高。color：文本颜色
元素可见性：visibility

代码：

水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #outerDiv{
            text-align: center;
        }#outerDiv div{
            display: inline-block;
        }
        #outerDiv2{
            display: flex;
            flex-direction:row;
            justify-content: center;
        }#outerDiv3{
            display: flex;
            flex-direction:column;
            align-items: center;
        }

    </style>
</head>
<body>
<p>1. text-align:center使行内元素居中</p>
<p style="background: #d39ab0;border:1px solid  #6993d3;text-align: center;">直接构建一个具有 ”text-align:center“样式的容器，那么里面包含的行内元素就会都居中了。</p>
<div id="flexDiv" style="background: #d3b8c2;text-align: center;">
    <span style="text-align: center;border:1px solid #6993d3">I need a job.行内元素：父元素加text-align:center (p 块状元素看起来居中，实际是因为其本身占满宽度，而其内的文字才是真正的居中 )</span>
</div>
<p>当一行有两个或以上块级元素需要居中</p>
<p>11. 块级元素一行居中，可以通过display：inline</p>
<div id="outerDiv" style="width:100%;"><!-- text-align 可继承（属性作用于自身，该属性可继承。直接在祖先元素加上，其内所有的元素文本都是居中对齐的）-->
    <!--这里设置margin:0 auto居中是无效的，只能让它自身居中，而非其子元素.而设置text-align:center只对行内元素有效，对本身无效-->
    <div style="background: lightgrey;width: 20%;height: 100px;"><span>111</span></div>
    <div style="background: #d3c7c9;width: 20%;height: 100px;"><span>222</span></div>
    <div style="background: #d3b8c2;width: 20%;height: 100px;"><span>333</span></div>
    <p>12. 每个div text-align:center;display:inline;&nbsp;&nbsp;&nbsp;width:70%;宽度超过一行则在竖直方向上居中</p>
    <div style="background-color: lightgrey;width: 70%;margin:0 auto"><p>I need a job.</p></div>
    <div style="background: #d3c7c9;width: 70%;"><p>aaa</p></div>
    <div style="background: #d3b8c2;width: 70%;"><p>bbb</p></div>
</div>
<p>13. 块级元素一行居中，可以通过display：flex</p>
<div id="outerDiv2" style="width:100%;text-align: center;">
    <div style="background: lightgrey;width: 20%;height: 100px;"><span>111111</span></div>
    <div style="background: #d3c7c9;width: 20%;height: 100px;"><span>222222</span></div>
    <div style="background: #d3b8c2;width: 20%;height: 100px;"><span>333333</span></div>
</div>
<p>14. 块级元素一列居中，可以通过display：flex</p>
<div id="outerDiv3" style="width:100%;text-align: center;">
    <div style="background: lightgrey;width: 20%;height: 100px;"><span>111111</span></div>
    <div style="background: #d3c7c9;width: 20%;height: 100px;"><span>222222</span></div>
    <div style="background: #d3b8c2;width: 20%;height: 100px;"><span>333333</span></div>
</div>
<p>15. 块级元素一列居中，直接全部margin：0 auto</p>
<div id="outerDiv4" style="width:100%;text-align: center;">
    <div style="background: lightgrey;width: 20%;height: 100px;margin:0 auto;"><span>111111</span></div>
    <div style="background: #d3c7c9;width: 20%;height: 100px;margin:0 auto;"><span>222222</span></div>
    <div style="background: #d3b8c2;width: 20%;height: 100px;margin:0 auto;"><span>333333</span></div>
</div>

</body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #outer div{
            display: inline-block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<p>垂直居中</p>
<div id="outer">
    <div style="background: lightgrey;width:20%;padding: 50px 0"><div>对父元素设置上下相等的padding, 不能设置height.单行多行有效</div></div>

    <div style="background: lightgrey;width:30%;height: 150px;line-height: 150px"><span>2.行内元素 height:100px;line-height:100px 单行有效</span></div>

    <table style="width:20%; display: inline-table;"><tr>
        <td style="background:#ddd;height:200px;">
            <span id="child">表格内 默认就是垂直居中</span>
        </td>
    </tr></table>

    <div style="display:inline-table;background: lightgrey;width:30%;height: 150px;"><div style="display: table-cell;vertical-align: middle">非表格：外部display:table;内部display: table-cell,vertical-align: middle"</div></div>

    <div style="background:#ddd;width:20%;height:200px;display:inline-flex;align-items: center;">
        <span>flex 父元素设置display:flex;align-items: center;</span>
    </div>
</div>


<p>块级元素</p>
<div style="background:#ddd;width:100px;height:200px;display:inline-flex;align-items: center;">
    <div style="background: #939393;width:100px;height:100px;">flex</div>
</div>
<div style="background:#ddd;width:100px;height:200px;display: inline-block;position:relative;">
    <div style="background: #939393;width:100px;height:100px;position:absolute;top:50%;margin-top:-50px ">内部div高度已知 绝对定位 margin负值</div>
</div>
<div style="background:#ddd;width:100px;height:200px;display: inline-block;position:relative;">
    <div style="background: #939393;width:100px;height:100px;position:absolute;top:50%;transform:translateY(-50%)"> 绝对定位 top:50%;transform: translateY(-50%)</div>
</div>
<p>水平垂直居中</p>
<div style="background:#ddd;width:300px;height:200px;display: inline-block;position:relative;">
    <div style="background: #939393;width:100px;height:100px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"> 绝对定位 top:50%;水平垂直居中</div>
</div>

<div style="background:#ddd;width:300px;height:200px;display: inline-flex;justify-content: center;align-items: center">
    <div style="background: #939393;width:100px;height:100px;"> flex水平垂直居中</div>
</div>

<div style="background:#ddd;width:300px;height:200px;display: inline-block;position:relative;">
    <div style="background: #939393;width:100px;height:100px;position:absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto"> margin:auto</div>
</div>

<div style="background:#ddd;width:300px;height:200px;display:inline-table;">
    <div style="background: #939393;width:100px;height:100px;display: table-cell;margin: 0 auto;vertical-align: middle;">非表格布局改为table</div>
</div>
<table style="width:20%; display: inline-table;"><tr>
    <td style="background:#ddd;height:200px;">
            <div id="child2" style="background: #939393;width: 50%;margin: 0 auto">表格默认垂直居中<br>display: table-cell;vertical-align: middle;</div>
    </td>
</tr></table>

<p>4.图片水平垂直居中,使用 line-height 和 vertical-align</p>
<div style="background:#ddd;width:500px;height:300px;line-height: 300px;text-align: center">
    <img src="http://pic26.nipic.com/20121219/2457331_085744965000_2.jpg" style="width: 300px;object-fit: contain;vertical-align: middle">
</div>

<p>5.图片文字垂直居中</p>
<div style="height:60px; line-height:60px; padding-left:65px;
            background:url(http://img2.imgtn.bdimg.com/it/u=1738421581,3107064791&fm=26&gp=0.jpg) no-repeat left center">
    <span>1.以图片为背景（需要已知高度）（只适用于单行文字）</span>
</div>
<br>

<div>
    <img style="vertical-align:middle;" src="http://img2.imgtn.bdimg.com/it/u=1738421581,3107064791&fm=26&gp=0.jpg" alt="这里是图片" />
    <span>2. 给图片加属性vertical-align:middle;（只适用于单行文字）</span>
</div>
<br>

<div>
    <img style="float: left;" src="http://img2.imgtn.bdimg.com/it/u=1738421581,3107064791&fm=26&gp=0.jpg" alt="这里是图片" />
    <span style="float: left;line-height: 200px">3.图片和文字设置左浮动，文字加line-height（需要已知高度，只适用于单行文字）(需要设置最小宽度，否则自适应有时会挤成两行)</span>
</div>
<br>

<div style="clear:both;position: relative;">
    <img style="display: inline-block;" src="http://img2.imgtn.bdimg.com/it/u=1738421581,3107064791&fm=26&gp=0.jpg" alt="这里是图片" />
    <span style="position: absolute;top: 50%;transform: translateY(-50%)">4.文字相对容器绝对定位（可以多行文字）</span>
</div>
<br>

<div style="clear: both;">
    <div style="display: inline-block;vertical-align: middle">
        <img src="http://img2.imgtn.bdimg.com/it/u=1738421581,3107064791&fm=26&gp=0.jpg" alt="这里是图片">
    </div>
    <div style="display: inline-block;height: 50px;">
        <span>5.图片和文字都包裹div，对div操作display: inline-block，图片要vertical-align: middle（只适用于单行文字），这个方法和2类似。。。</span>
    </div>
</div>
<br>
</body>
</html>

参考：

CSS垂直居中的11种实现方式 https://www.cnblogs.com/zhouhuan/p/vertical_center.html