细谈text-align: center

text-align: center的几个用处

1.概括

CSS参考手册上关于text-align:center的说明是:text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。cneter参数让把文本排列到中间。 单纯地看这句话你可以知道该属性可以让文本居中显示,但是除此之外,该属性还可以让父元素为块元素的行内元素或行内块元素居中显示。

2.用法

1.块级元素下使用text-align: center,使得其文本内容居中对齐
    <div class="parent">
        
        123
    div>

效果:
细谈text-align: center_第1张图片

2.块级元素下使用text-align: center,使得包含在其中的行内元素或行内块元素居中对齐
    <div class="parent">
        
        <strong>行内元素strong>
    div>
    <div class="parent">
        
        <em>行内元素转行内块元素em>
    div>

其中这里的a元素已经通过CSS转化为行内块元素
效果:
细谈text-align: center_第2张图片

3.块级元素下使用text-align: center,包含在其中的块级元素不能居中对齐,
但是这个子代块级元素p会继承text-align: center,使得p的文本内容居中对齐
    <div class="parent">
        
        <p>hahahap>
    div>

效果:
细谈text-align: center_第3张图片

3.详细代码(第4点为注意点)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .parent {
            width: 500px;
            height: 150px;
            text-align: center;
            background-color: pink;
            border-bottom: 1px solid black;
        }
        strong {
            background-color: blue;
        }
        em {
            display: inline-block;
            background-color: blue;
        }
        p {
            width: 200px;
            height: 50px;
            background-color: blue;
        }
    style>
head>
<body>
    
    <div class="parent">
        
        123
    div>
    <div class="parent">
        
        <strong>行内元素strong>
    div>
    <div class="parent">
        
        <em>行内元素转行内块元素em>
    div>
    <div class="parent">
        
        <p>hahahap>
    div>
    script>
body>
html>


4.注意

在CSS代码中若不添加消除内外边距的代码(如下),块元素内包含块元素会出现显示问题(如图)

        * {
            margin: 0;
            padding: 0;
        }

细谈text-align: center_第4张图片

加上之后:
细谈text-align: center_第5张图片

你可能感兴趣的:(CSS,HTML,前端,css,css3,html,html5)