使文本水平居中和垂直居中
程序员文章站
2022-04-24 22:16:32
...
1.使文本水平对齐
<h1 style="text-align: center;">Helloworld</h1>
利用text-align属性进行居中
2.使文本垂直对齐
利用line-height与height等高进行对齐
行高=上空隙+文字高度+下空隙
上空隙==下空隙
行高小于盒子高度：文字偏上
行高大于盒子高度：文字偏下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: block;
width: 230px;
height: 40px;
background-color: rgb(95,87,80);
text-decoration: none;
font-size: 14px;
color: #fff;
text-indent: 2em;
padding: auto 0;
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
手机 电话卡
</a >
<a href="#">
电视 盒子
</a>
<a href="#">
笔记本 平板
</a>
<a href="#">
出行 穿戴
</a>
</div>
</body>
</html>
上一篇： socket相关操作（下）
推荐阅读
-
CSS元素（文本、图片）水平垂直居中方法
-
css样式水平居中和垂直居中的方法
-
行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型
-
CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
-
CSS实现元素居中样式（水平居中和垂直居中）
-
CSS垂直居中和水平居中_html/css_WEB-ITnose
-
html中的水平居中和垂直居中的问题。(固定高度与高度不定)_html/css_WEB-ITnose
-
Vue项目中使用Html+Css使div在页面中居中显示(水平+垂直)
-
html中的水平居中和垂直居中的问题。(固定高度与高度不定)_html/css_WEB-ITnose
-
html中的水平居中和垂直居中的问题。(固定高度与高度不定) - DD狗