哪家建设网站,成都全网推广哪家专业,企业网站网页打开慢,网站数据库如何做单行文本垂直居中对齐
在块元素中#xff0c;让单行文本居中#xff0c;可以使用line-height等于块元素的高#xff0c;即可让该单行文本垂直居中对齐。
!DOCTYPE html
html langen
headmeta charsetUTF-8me…单行文本垂直居中对齐
在块元素中让单行文本居中可以使用line-height等于块元素的高即可让该单行文本垂直居中对齐。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}p {line-height: 200px;background-color: #bfa;height: 200px;}/style
/head
bodypsdfasdfsdfasdf手动阀手动阀手动阀手动阀 /p
/body
/html多行文本垂直居中对齐
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}/* 只需要设置display:table-cell并且让vertical-align:middle即可可随p元素的高度变化都保持多行文本居中效果见下图 */p {display: table-cell;vertical-align: middle;background-color: #bfa;height: 200px;}/style
/head
bodypsdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀/p
/body
/html应用示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href//at.alicdn.com/t/c/font_3766921_5avulu6dwfj.cssstyle* {margin: 0;padding: 0;}.box .box-item {/* 让多行文本垂直居中 */display: table-cell;vertical-align: middle;width: 150px;height: 150px;/* margin-right会无效 */margin-right: 10px;border: 1px solid red;text-align: center;background-color: #bfa;}/style
/head
bodydiv classboxdiv classbox-itemi classiconfont icon-icon_player/ispan播放器/span/divdiv classbox-itemi classiconfont icon-Music/i!-- 使用br/让它换行 --br/span音乐/span/divdiv classbox-itemi classiconfont icon-ic_wechat/i!-- 使用div块级元素换行 --div微信/div/divdiv classbox-itemi classiconfont icon-search/i!-- 使用p块级元素换行 --div微信/div/divdiv classbox-item!-- 行元素和块级元素穿插 --i classiconfont icon-icon_xinlang-chunselogo/ii classiconfont icon-icon_xinlang-chunselogo/ip微博/pi classiconfont icon-icon_xinlang-chunselogo/ip微博/pi classiconfont icon-icon_xinlang-chunselogo/i/divdiv classbox-itemimg stylevertical-align:bottom; src./img/avatar_50x50.jpg alt/divdiv classbox-itemimg src./img/avatar_50x50.jpg altimg src./img/avatar_50x50.jpg altimg src./img/avatar_50x50.jpg alt/divdiv classbox-item!-- 让底部对齐 --img stylevertical-align:bottom; src./img/avatar_50x50.jpg altimg stylevertical-align:bottom; src./img/avatar_50x50.jpg altimg stylevertical-align:bottom; src./img/avatar_50x50.jpg alt/div/div!-- 常规方法让图片水平垂直居中对齐 --div stylewidth:150px;height: 150px;position: relative;background-color: pink;border: 1px solid red;margin-top: 10px;div stylewidth:50px;height: 50px;left: 0;right: 0;bottom: 0;top: 0;position:absolute;margin: auto;img stylemargin: auto;width: 100%;height: 100%;object-fit:cover; src./img/avatar.jpg alt/div /div/body
/html
