美文网首页
垂直居中问题、多行居中

垂直居中问题、多行居中

作者: Amanda妍 | 来源:发表于2020-07-18 11:24 被阅读0次

实现效果

实现代码:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.d1{

text-align: center;

width: 200px;

height: 100px;

background-color: greenyellow;

/*单行居中*/

line-height: 100px;

}

/*多行居中*/

.d2{

width:600px;

background-color: goldenrod;

/*内填充 多行居中*/

padding :20px 0;

text-align: center;

}

.d3{

width:600px;

height: 200px;

background-color: red;

margin-top: 50px;

/*标签转换*/

display: table-cell;

vertical-align:middle;

text-align: center;

}

</style>

</head>

<body>

<div class="d1">

明月几时有?把酒问青天

</div>

<div class="d2">

明月几时有?把酒问青天.不知天上宫阙,今夕是何年?

</div>

<div class="d3">

明月几时有?把酒问青天.不知天上宫阙,今夕是何年?

</div>

</body>

</html>

相关文章

  • 垂直居中问题、多行居中

    实现效果 实现代码: .d1{ text-align: center; width:...

  • css居中各种实现

    垂直居中 多行文字垂直居中 利用flex布局 利用display: table;

  • 所有CSS居中方法,了解一下?

    目录 水平居中内联元素水平居中块级元素水平居中多个块级元素的水平居中 垂直居中内联元素垂直居中单行内联元素多行内联...

  • CSS面试题(一)

    一、垂直居中,多行文本垂直居中? 1、单行文本垂直居中设置高度height和行高line-height,使高度he...

  • css居中完全指北

    css的水平垂直居中问题太常见了,整理一波 行内单行文本 行内元素的水平居中比较常见 行内元素多行文本的垂直居中,...

  • 多行文字的水平垂直居中

    单行文字垂直居中 知道容器的高度即可 html css 多行文字垂直居中 html css 多行文本溢出用省略号表...

  • 居中

    水平居中 行内元素(单行/多行) 单行块级元素 多行块级元素 垂直居中 单行行内元素 padding-top = ...

  • 普通的css样式技巧

    垂直居中 1、多行文字垂直居中 给文字容器的父容器设定display:table,给文字容器设定vertical-...

  • 页面布局居中问题

    css页面布局水平垂直居中问题 居中问题

  • 如何垂直居中一个元素

    单行内联元素垂直居中 利用line-height与height相同即可 多行内联元素垂直居中 利用flex布局利用...

网友评论

      本文标题:垂直居中问题、多行居中

      本文链接:https://www.haomeiwen.com/subject/cbuwhktx.html