html 如何是一行文字位于页面正中

html-css033

html 如何是一行文字位于页面正中,第1张

不懂题主是想在怎样的代码中使用，大概说一下做法呗

1、如果是文字的父html元素已经居中，或者铺满整个屏幕，那直接在父元素上设置css为text-align:center即可，比如：

<div style="text-align:center">

文字内容文字内容

</div>

2、如果是文字的父元素有固定宽度但没居中的，就可以将父元素设置margin:auto属性居中后再通过text-align:center使文字居中，比如：

<div style="margin:autotext-align:center">

文字内容文字内容

</div>

3、文字没有父元素，为独立元素，不受整个布局约束时，则比较特殊，需要用positon属性和text-align属性一起使用，如果是这种情况，题主可以回复我详情，我再帮助解答。

hr标签是分割线标签，如果要在后面加东西要通过postion相对定位，不推荐这么做，如果只是想要hr的分割效果，同时在后面加东西，建议用div元素设置css来模拟效果会更好，比如设置窄的div，设置背景色和上下边距来模拟实现，后面用span或p标签紧跟写文字即可

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

1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。

2、在index.html中的<body>标签中，新增样式代码：style="text-align: center"。

3、浏览器运行index.html页面，此时成功将button按钮显示在了网页的正中间。

方案一：文字浮动定位到图片上

<div class="img_wd">

   <div class="c_img"><img src="test.jpg" width="100px" height="100px"/></div>

   <div class="c_words">测试文字</div>

</div>

<style>

.c_img{position:relative}

.c_words{position:absolutetop:35pxheight:30pxline-height:30px}

</style>

如要文字居中显示：top值=(图片高度-文本div高度)/2

如需要求水平居中：left=(图片宽度-文本div宽度)/2

方案二：用图片做文字图层背景

<div class="img_wd">测试文字</div>

<style>

.img_wd{

background:url(test.jpg) top center no-repeat

width:100pxheight:100pxline-heiht:100px

text-align:center}

</style>