We all know that sometimes a text input box and a paragraph are displayed on the same line. However, they are not vertically centered and do not look beautiful. This CSS code solves this problem, the above line is not defined, and the lower line is defined. It can be seen that there are obvious differences.
<! -- Ctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt -->
<HTML>
<Head>
<Title> CSS alignment the same line of text with the input box </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/CSS">
# {
Height: 30px;
Border: 1px solid # CCC;
}
# B {
Margin-top: 20px;
Height: 30px;
Border: 1px solid # CCC;
}
# A input {
Width: 200px;
Height: 30px;
Border: 1px solid red;
}
# B input {
Width: 200px;
Height: 30px;
Border: 1px solid red;
Vertical-align: middle;
}
</Style>
</Head>
<Body>
<Div id = "A"> <input/> text1 </div>
<Div id = "B"> <input/> text2 </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
