更改屏幕尺寸时如何将文本保留在html部分的中心？
[英]How to keep text in center of the html section when changing the screen size?
问题描述
I have implemented a simple web page with 2 sections. 
我已经实现了一个包含2个部分的简单网页。 In each of this section there is text contains 2 lines. 在每个部分中，文本包含2行。 I would like to keep this text in center (margin left, top, right, bottom) in the section when changing the size of the screen (RWD). 更改屏幕大小（RWD）时，我想将此文本保留在该部分的中间（左，上，右，下边距）。 Eg when I run this web page on the desktop the text in the section will be in center-center of the section and when I run this web page on the smartphone/tablet this text also be in the center of the section. 例如，当我在桌面上运行此网页时，该部分中的文本将位于该部分的中心，而当我在智能手机/平板电脑上运行此网页时，该文本也将位于该部分的中心。 Is it possible to do it? 有可能做到吗？ The code is below: 代码如下：
body { height: 100%; } section { height: 60vh; } section:nth-child(1) { background: white; } section:nth-child(2) { background: #f2efef; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <section> John is happy.<br><br> Thank you.<br><br> </section> <section> Have a nice day.<br><br> Good luck.<br><br> </section> </body> </html>
Thank you for help. 谢谢你的帮助。
2 个解决方案
解决方案1
2 2019-02-24 22:18:40
You can use flexbox grid for block alignment. 您可以使用flexbox网格进行块对齐。
body { height: 100%; } section { height: 60vh; display: flex; justify-content: center; align-items: center; } section:nth-child(1) { background: white; } section:nth-child(2) { background: #f2efef; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <section> John is happy.<br><br> Thank you.<br><br> </section> <section> Have a nice day.<br><br> Good luck.<br><br> </section> </body> </html>
解决方案2
0 2019-02-24 22:32:37
I hope this helps you. 我希望这可以帮助你。
in the CSS file you can use the following ways, 在CSS文件中，您可以使用以下方式，
section {
text-align:center;
height: 60vh;
}
/* or */ /* 要么 */
section {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.