html – div中的文本和calc()怀疑_html-js-css

概述如何将文本(p)在div(.item)内垂直和水平居中？ <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .wrapper 如何将文本(p)在div(.item)内垂直和水平居中？

<!DOCTYPE HTML><HTML lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <Meta charset="utf-8" />    <Title></Title>    <style type="text/CSS">        .wrapper {            wIDth: auto;            height: 10em;            background-color: red;            position: relative;        }        .item {            wIDth: 4em;            height: 4em;            background-color: black;            position: absolute;            display: inline-block;            color: white;        }        .item p {            text-align: center;            vertical-align: mIDdle;        }        #top-right {            right: 0em;        }        #center {            top: calc(50% - 2em);            right: calc(50% - 2em);        }        #bottom-left {            bottom: 0em;            left: 0em;        }        #bottom-right {            right: 0em;            bottom: 0em;        }    </style></head><body>    <header></header>    <main>        <div >            <div  ID="top-left"><p>top left</p></div>            <div  ID="top-right"><p>top Right</p></div>            <div  ID="center"><p>Center</p></div>            <div  ID="bottom-left"><p>Bottom left</p></div>            <div  ID="bottom-right"><p>Bottom Right</p></div>        </div>    </main>    <footer></footer></body></HTML>

可以使用calc(因为我读到某些浏览器不支持此功能)？或者还有另一种方法可以在没有calc()的div中将元素#center居中？

解决方法您可以使用display：flex来实现.我已将以下属性添加到您的.item中

display: flex;  align-items: center;  justify-content: center;  text-align: center;

更新的代码段：

.wrapper {  wIDth: auto;  height: 10em;  background-color: red;  position: relative;}.item {  wIDth: 4em;  height: 4em;  background-color: black;  position: absolute;  color: white;  display: flex;  align-items: center;  justify-content: center;  text-align: center;}#top-right {  right: 0em;}#center {  top: calc(50% - 2em);  right: calc(50% - 2em);}#bottom-left {  bottom: 0em;  left: 0em;}#bottom-right {  right: 0em;  bottom: 0em;}

<header></header><main>  <div >    <div  ID="top-left">      <p>top left</p>    </div>    <div  ID="top-right">      <p>top Right</p>    </div>    <div  ID="center">      <p>Center</p>    </div>    <div  ID="bottom-left">      <p>Bottom left</p>    </div>    <div  ID="bottom-right">      <p>Bottom Right</p>    </div>  </div></main><footer></footer>

总结

以上是内存溢出为你收集整理的html – div中的文本和calc()怀疑全部内容，希望文章能够帮你解决html – div中的文本和calc()怀疑所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1068664.html