Home > Article > Web Front-end > How to center text up and down in html
How to center text up and down in html
- 藏色散人Original
- 2021-01-25 09:50:3845032browse
htmlThe method to realize the top and bottom centering of text: first create an HTML sample file; then create a text box; then define the height attribute of Text; finally realize the text through attributes such as "vertical-align:middle;" in CSS Just center it up and down.
The operating environment of this tutorial: Windows 7 system, HTML5&&CSS3 version, DELL G3 computer.
Recommended: css video tutorial
Let the text in the text box in HTML be vertically centered
When you define it yourself When the height attribute of Text is disabled, the text entered in Text is not vertically centered. However, you can add CSS to control it so that the entered text is vertically centered, making the web page more perfect.
<html>
<head>
<style type="text/css">
#text {
height:20px;
vertical-align:middle;
line-height:20px; /*line-height must be equal to height*/
}
</style>
</head>
<body>
<div>
<input type="text" id="text">
</div>
</body>
</html>Add verticla-align After adding the two attributes of line-height and line-height, the text in the text box will be vertically centered in the text box. It should be noted that line-height must be equal to height.
The above is the detailed content of How to center text up and down in html. For more information, please follow other related articles on the PHP Chinese website!