网站制作三站,万站霸屏,网站设计比例,网站出错 图片纯css实现-让字符串在文字少时显示为居中对齐#xff0c;而在文字多时显示为左对齐
使用flex实现
思路 容器样式#xff08;.container#xff09;: Flex容器的BFC性质使得其内部的子元素#xff08;.text-box#xff09;在水平方向上能够居中#xff0c;通过justify-c…纯css实现-让字符串在文字少时显示为居中对齐而在文字多时显示为左对齐
使用flex实现
思路 容器样式.container: Flex容器的BFC性质使得其内部的子元素.text-box在水平方向上能够居中通过justify-content: center;实现。 文本框样式.text-box: BFC阻止了文本框从Flex容器中溢出确保文本框的背景颜色不会延伸到Flex容器之外。
在文本少时子元素宽度等于文本长度但父容器让其居中就表现出子元素中文本是居中的。 而文本多时子元素宽度等于容器长度虽然父容器也让子元素居中子元素也在父容器中居中了。不过子元素中文本向左对齐于是用户看到的就是子元素文本的向左对齐的表现形式。
源码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /style.container {display: flex;justify-content: center;margin: 10px 10%;background-color: blue;}.text-box {background-color: red;}/style/headbodydiv classcontainerdiv classtext-box文字少-居中对齐文字多-左对齐|/div/divdiv classcontainerdiv classtext-box文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|/div/div/body
/html使用text-align实现
思路 容器样式.container: 使用 text-align: center; 将容器内的文本内容在水平方向上居中对齐。 文本框样式.text-box: 使用 display: inline-block; 将文本框设置为内联块使其在容器中水平居中。设置文本框的文本对齐方式为左对齐通过 text-align: left; 实现。
在文本少时子元素宽度等于文本长度但父容器让其居中就表现出子元素中文本是居中的。 而文本多时子元素宽度等于容器长度虽然父容器也让子元素居中子元素也在父容器中居中了。不过子元素中文本向左对齐于是用户看到的就是子元素文本的向左对齐的表现形式。
源码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /style.container {text-align: center;background: skyblue;margin: 10px 10%;}.text-box {display: inline-block;text-align: left;background: yellow;}/style/headbodydiv classcontainerdiv classtext-box文字少-居中对齐文字多-左对齐|/div/divdiv classcontainerdiv classtext-box文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|/div/div/body
/html 使用table布局实现
思路 文本框样式.text-box: 使用 display: table; 属性将容器元素设为表格布局使其具备表格的一些特性。设置 margin: 10px auto; 来实现水平方向上的居中效果。 文本内容样式.text-content: 使用 display: table-cell; 属性使文本内容元素具备表格单元格的特性可以让其在垂直方向上撑满整个父元素。
通过这些样式的组合实现了两个不同大小的文本框其中文本内容在第一个文本框中单行显示并在水平方向上居中而在第二个文本框中文本内容可以多行显示仍然在水平方向上保持居中。表格布局的使用在这里能够提供一些表格特性同时 table-cell 元素的特性确保了垂直方向上的撑满效果-撑满时就是向左对齐的效果。
源码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /style.text-box {display: table;margin: 10px auto;background: skyblue;}.text-content {display: table-cell;background: red;}/style/headbodydiv classtext-boxdiv classtext-contentp文字少-居中对齐文字多-左对齐|/p/div/divdiv classtext-boxdiv classtext-contentp文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|/p/div/div/body
/html 使用bfc实现
思路 容器样式.container:正常的块级元素内部是正常的块级作用域。 文本框样式.text-box: width: fit-content;让子元素有了一个与文本大小的宽度。margin: 0px auto;通过BFC让其可以水平居中。
在文本少时子元素宽度等于文本长度但父容器让其居中就表现出子元素中文本是居中的。 而文本多时子元素宽度等于容器长度虽然父容器也让子元素居中子元素也在父容器中居中了。不过子元素中文本向左对齐于是用户看到的就是子元素文本的向左对齐的表现形式。
源码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /style.container {background-color: blue;margin: 10px 0px 0px 0px;}.text-box {margin: 0px auto;width: fit-content;background-color: red;}/style/headbodydiv classcontainerdiv classtext-box文字少-居中对齐文字多-左对齐|/div/divdiv classcontainerdiv classtext-box文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|文字少-居中对齐文字多-左对齐|/div/div/body
/html
