怎么用CSS样式使文本居中对齐

html-css049

怎么用CSS样式使文本居中对齐,第1张

可以使用“text-align:center”是文本居中。

1、新建html文档，在body标签中添加div标签，然后在div标签中添加文字：

2、为div标签设置宽高和边框css样式，这时默认情况下文字靠左对齐：

3、为div添加“text-align:center”，其中“text-align”指的是文本对齐方式，“center”指的是居中对齐，这时文本就会居中对齐：

纯css没法实现，除非你的元素宽度完全写死，那样的话会有很多问题，还是用js来实现吧，我写的这个需要引入jquery

<div id="main">

    <p class="tocenterRight">哥哥</p>

    <p class="tocenterRight">你哥哥</p>

    <p class="tocenterRight">你的大哥哥</p>

</div>

<script src="jquery-3.2.1.min.js" type="application/javascript"></script>

<script>

    $(document).ready(function(){

        //传入type参数center-right 或者left-right 可以传入以后看下效果，第二个参数是要做对其的类名，自己测试一下。

        textAlign("center-right",".tocenterRight")

    })

    var textAlign = function(type,classname){

        var o = $(classname)

        var maxwidth = 0

        switch (type){

            case "center-right" :

                $(o).css("text-align","right")

                if(o.length>0){

                    $(o).css("width",parseInt($($(o).parent()).width()/2))

                }else{

                    console.log("找不到任何对象！")

                }

                break

            case "left-right" :

                $(o).css("text-align","right")

                if(o.length>0){

                    for(var i=0i<o.lengthi++){

                        $(o[i]).css("display","inline")

                        maxwidth = parseInt($(o[i]).css("width"))>maxwidth ? parseInt($(o[i]).css("width")) : maxwidth

                    }

                    $(o).css("display","block")

                    $(o).css("width",maxwidth)

                }else{

                    console.log("找不到任何对象！")

                }

                break

            default :

                break

        }

    }

</script>

两种对齐的效果看下图：

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div{

border: 1px solid blue

width: 300px

text-align: justify

}

div:after {

display: inline-block

width: 100%

content: ''

}

3、浏览器运行index.html页面，此时一行内的文字实现了两端对齐。