css实现文字居中两边横线效果

huakaiwuxing 2019-06-29

效果：

css实现文字居中两边横线效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .title{
            text-align: center;
            position: relative;
            height: 50px;
            line-height: 50px;
            width: 800px;
            margin: 200px auto;
        }
        .title:after,.title:before{
            content: "";
            position: absolute;
            top: 50%;
            background: #7a7a7a;
            height: 1px;
            width: 35%;
        }
        .title:after{
            left: 0;
        }
        .title:before{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="title">css实现文字居中两边横线效果</div>
</body>
</html>
huakaiwuxing

huakaiwuxing

相关推荐

一篇文章带你了解CSS对齐方式

将块元素水平居中对齐 , 使用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。将元素内部的文本居中, 使用text-align: center;对齐元素的一种方法是使用 position: absolute;在我年轻而脆弱的岁月里，父亲

多读书读好书 / 0评论 2020-11-03

CSS设置行内元素和块级元素的水平居中、垂直居中

什么叫行内元素？text-align:center;height:30px;line-height:30px4.CSS设置块级元素的水平居中和垂直居中：关键代码：

drdrsky / 0评论 2020-06-16

HTML中怎么使文字各种居中对齐？（代码示例）

本篇文章主要介绍了如何去写关于html文字居中代码。希望对有需要的朋友有所帮助。前端10K面试准备，最完整面试真题分享（含答案）！text-align 属性规定元素中的文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 just

gufudhn / 0评论 2020-06-12

Html/css 水平布局居中

如何设置水平居中显示？lsit-parentInner设置position相对位置，以满足内容的100%填充list-parentOuter. lsit-parentInner设置right，以父容器list-parentOuter的宽度*50，设置右侧距

aSuncat / 0评论 2020-06-11

div内容水平垂直居中的正确玩法

<!DOCTYPE html>. text-align: center;height: 300px;border: 1px solid rebeccapurple;display: inline-block;vertical-align: mi

PioneerFan / 0评论 2020-06-10

css实现垂直水平居中

<!DOCTYPE html>. margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;width: 300px

沈宫新 / 0评论 2020-05-04

demo50-版心居中

<!DOCTYPE html>. width: 1000px;height: 300px;background: pink;margin: 100px auto;<!--版心居中-->

swiftwwj / 0评论 2020-03-28

div 内容垂直居中

<div style="width: 200px;height: 200px;border: solid red 1px;display: flex;align-items: center;">

HSdiana / 0评论 2020-03-28

css样式设置元素居中的最简便方式 左右居中或垂直居中

父元素需要设置position为非static定位，如果需要左右也居中，加上left: 0;right: 0;即可。

葉無聞 / 0评论 2020-03-23

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。B-1:为什么选择方法一加入table标签?针对B

lyg0 / 0评论 2020-03-07

absoulue与relative配合定位盒子居中问题

如何通过absoulue与relative配合把一个盒子或者是把2个div块同时放到页面中央部分？定位完成后为什么又需要margin-left与margin-top各往回走50%的长度，别忘记用z-index定位高度，请看下面代码展示:

nercon / 0评论 2020-02-22

div中的div如何居中

方法一： 这种方式的弊端是：必须要知道这个容器的长宽，因为在子元素中的 margin-top:-100px; margin-left:-100px; 这两个样式分别是子元素长、宽的一半。//这种方式很好的避免了方式一的弊端，不需要知道自己的长宽，一样可以定

STPace / 0评论 2020-02-17

实现盒子居中的方式[经典面试题]

第三种方式,是利用的子绝父相定位,子盒子定位使用margin:auto;自动适应,然后top,left,right,bottom都设置为零;另外,还有一些方式,提及一下;2 > . js中同样有些方法能在不知道父盒子和子盒子的宽高的情况下,返回拥有实

STPace / 0评论 2019-12-30

css - 水平垂直居中几种方式

position: absolute设置left、top、margin-left、margin-to(定高)；grid，兼容性相对比较差；

冰蝶 / 0评论 2020-01-10

0060 translate、margin 实现绝对定位的盒子 水平居中、垂直居中

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

玫瑰小妖 / 0评论 2019-12-31

图片大小不改动，根据屏幕大小自动把图片居中显示

background-image: url; <!-- 背景图片路径 -->. -- 若背景图片小于div,则居中显示 -->. -- 背景图片固定,不随scroll拖动而变动 -->. -- div向左移动自身宽度的50% -

爱好HtmlCssJs / 0评论 2019-12-31

css居中的一些方法

方法二:css3新属性fit-content意思是宽度缩小到和内容一样宽配合margin:auto;

jiedinghui / 0评论 2019-12-25

垂直水平居中

<!DOCTYPE html>. width: 300px;height: 300px;background: red;display: table-cell;vertical-align: middle;width: 100px;height

行吟阁 / 0评论 2019-12-08

css布局：如何实现垂直居中？

5. 父级设置弹性盒子，并设置弹性盒子相关属性；

zuncle / 0评论 2019-11-08

css的居中

<!DOCTYPE html>. width: 400px;height: 400px;background-color: red;text-align: center;width: 200px;height: 200px;background

libowen0 / 0评论 2014-05-30

常用元素水平垂直居中方案

其次子元素的宽高必须已知，因为需要设置子元素的负margin.

谷歌架构师 / 0评论 2019-11-04

页面基础布局相关知识 --- 居中&amp;经典布局

建议先了解一下基础知识,实际上算深入基础了，随意门:想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC想要清晰的明白（二）CSS 盒模型Block box与Line box. 水平居中的各种方法优劣.原理：父元素设置相对定位，子元素设置

红壶吃猬队 / 0评论 2019-11-04

纯JS实现图片预览与等比例缩放和居中

.item { margin:0 auto; padding-bottom: 10px; overflow: hidden; height:24px;}. .item-name { float: left; font-size: 12px; padding

zhangli / 0评论 2015-04-14

按钮文字居中

在firefox chrome opera等浏览器里，文字是默认垂直居中的，但是在ie 6 7 8下都是不居中的，这个时候第一想法就是给这个按钮写line-height啦，height:24px;line-height:24px; 写了最正常的一句，这时测

gufudhn / 0评论 2015-08-25

不定宽高div水平垂直居中

1.块级元素：定宽 + margin:0 auto;；

IT游罠 / 0评论 2015-11-15

不定宽高的元素居中布局解决方案

方案二: 块级元素 + margin: 0 auto;

WebVincent / 0评论 2019-09-18

CSS实现垂直居中的常用方法

在前端开发过程中，盒子居中是常常用到的。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。下面我们一起来讨论一下实现垂直居中的方法。首先，定义一个需要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。接下来，需要做

aiolos / 0评论 2016-04-15

div实现在屏幕水平垂直居中的方法

如果你有更多更好的方法，欢迎亲们补充。

zljiaa / 0评论 2019-09-07

CSS实现垂直居中的常用方法

<!DOCTYPE html>. width: 100%;height: 100%;margin: 0;padding: 0;width: 300px;height: 300px;background: orange;margin-top: -

loverlucky / 0评论 2016-03-15

CSS垂直居中，你会多少种写法？

CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。块级元

Phoebe的学习天地 / 0评论 2019-07-01

css-元素居中

本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。使用text-align:center;属性可以实现在行内元素在块级父元素水平居中。a.将元素的左右外边距设置为auto。父元素相对定位，子元素绝对定位 left:50%，然后向左移动子元

Phoebe的学习天地 / 0评论 2019-07-01

CSS 居中

transform<!DOCTYPE html>. width: 500px;height: 500px;background: lightgray;position: relative;background: white;width: 250

libowen0 / 0评论 2019-07-01

css实现水平垂直居中的4种方法

margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */. transform: translate; /* 使用css3的transform来实现 */

WebVincent / 0评论 2019-07-01

如何让子元素在父元素中水平垂直居中七种方法?

YannZoe / 0评论 2019-07-01

纯CSS实现垂直居中的几种方法

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。top: 0; left: 0; bottom: 0; right: 0

云端漂移 / 0评论 2019-07-01

CSS - 垂直水平居中方法

行内元素 设置 text-align:center;Flex布局 设置display:flex;justify-content:center;垂直居中设置：。先设置 display:table-cell 再设置 vertical-align:middle；

王为仁 / 0评论 2019-07-01

前端培训-初级阶段（13、18）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂，本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。先来说一下为什么这节课跳课了，不是说中间的我

WebVincent / 0评论 2019-07-01

【HTML/CSS】CSS实现垂直水平居中

相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法元素已知宽度绝对定位 + margin反向偏移html. 当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

王景迁 / 0评论 2019-07-01

css元素居中方法归纳

同理，top和bottom的值相等，即可实现垂直居中。②、margin负值 && 相对定位.inner{. }注意点： ①、inner元素要设为relative②、margin外边距为自身宽高的一半（负数）③、CSS3 transform属

libowen0 / 0评论 2019-06-30

老生常谈之CSS的垂直居中

“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中 实现垂直居中。”在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素， 就对它的父元素应用 text-align: center; 如果它是一个块级元素，就对它自身应用 m

renpinghao / 0评论 2019-06-30

总结：前端开发中让元素水平垂直居中的方法

前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。水平居中text-align：center;这个是没有浮动的情况下，我们可以先将要居中的块级元素设为inline/inline-block，然后在其父元素上加上属性tex

kbkiss / 0评论 2019-06-29

css 元素居中

一：水平居中1、行内元素水平居中在父元素上设置 text-align: center 使文字/图片水平居中。}2、块级元素水平居中先给块级元素设置宽度再给块级元素设置margin：0 auto;.container {. 块级元素如果设置了高度，就不知道如

淡风wisdon大大 / 0评论 2019-06-28

6种不同的CSS实现垂直水平居中

<!DOCTYPE html>. width: 200px;height: 200px;background: #cccccc;margin-top: 10px;display: table-cell;vertical-align: middl

冰蝶 / 0评论 2018-08-17

垂直水平居中方法小结

正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性

qiupu / 0评论 2019-06-28

css控制图片不改变原比例居中显示，图片超出div部分隐藏

<!DOCTYPEhtml>. display:flex;flex-direction:row;width:200px;height:200px;overflow:hidden;display:flex;justify-content:cent

hhhkhhh / 0评论 2017-07-20

关于css布局、居中的问题以及一些小技巧

CSS的两种经典布局左右布局一栏定宽，一栏自适应<!}利用绝对定位实现<!

红壶吃猬队 / 0评论 2019-06-28

DIV+CSS居中布局条件与CSS布局居中代码

一般网页主体内容布局均为居中于浏览器。首先我们要对body设置css内容居中样式，然后布局最外层DIV盒子时候使用margin:0auto即可让对象布局居中。为了观察到布局居中效果，我们CSS命名对象为".divcss5",设置CSS边

冰蝶 / 0评论 2017-03-29

内部元素横向&&垂直居中的15种常见写法

非常简洁易懂，排名不分先后，开整！

renpinghao / 0评论 2019-06-28

【转】CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS. Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对H

Dorissun / 0评论 2016-09-22