How to center text up and down in html

藏色散人
Release: 2022-12-30 11:12:31
Original
45039 people have browsed it

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template