Home >Web Front-end >HTML Tutorial >How to center text up and down in html

How to center text up and down in html

藏色散人
藏色散人Original
2021-01-25 09:50:3845078browse

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.

How to center text up and down in html

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn