In the HTML code, you sometimes need to add an icon next to the text.
By default, the picture is top-aligned, end-aligned character set, so the picture is usually high, low word, not horizontally centered.
There are three common methods: 1, by adding css of "vertical-align: middle;"; 2, if the picture is the background image, you can set the background image in the css; 3, the text and pictures were placed in a different div . The above three methods can make images and text displayed on the same line, we use the following example to use it.
1, add the "vertical-align: middle" property
We use the "landing" in this instance to do the actual situation, the "landing" into the picture, "Retrieve Password" is set to the text that html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a>
</div>
</body>
</html>
It is shown below:
2, the picture as a background image
If our picture itself is a background image, you can use the "background" in the css to set the picture, html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.haokan{
width: 300px;
height: 50px;
line-height: 50px;
background-color: red;
background: url(logo.jpg) no-repeat left center;
}
.haokan a{
display: block;
margin-left: 116px;
}
</style>
</head>
<body>
<div class="haokan">
<a href="">找回密码</a>
</div>
</body>
</html>
Also shown below:
3, respectively, and the images of text into different div, html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.divs .imgs{
display: inline-block;
vertical-align: middle;
}
.divs .infos{
display: inline-block;
}
</style>
</head>
<body>
<div class="divs">
<div class="imgs"><img src="logo.jpg" alt=""></div>
<div class="infos"><a href="">找回密码</a></div>
</div>
</body>
</html>
It is shown below:
-------------------------------------------------------------------------------------------------------------------------------------
The first method is recommended.
Finish
Reprinted indicate reprint the words, mark the original author and the original Bowen address.
In the HTML code, you sometimes need to add an icon next to the text.
By default, the picture is top-aligned, end-aligned character set, so the picture is usually high, low word, not horizontally centered.
There are three common methods: 1, by adding css of "vertical-align: middle;"; 2, if the picture is the background image, you can set the background image in the css; 3, the text and pictures were placed in a different div . The above three methods can make images and text displayed on the same line, we use the following example to use it.
1, add the "vertical-align: middle" property
We use the "landing" in this instance to do the actual situation, the "landing" into the picture, "Retrieve Password" is set to the text that html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a>
</div>
</body>
</html>
It is shown below:
2, the picture as a background image
If our picture itself is a background image, you can use the "background" in the css to set the picture, html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.haokan{
width: 300px;
height: 50px;
line-height: 50px;
background-color: red;
background: url(logo.jpg) no-repeat left center;
}
.haokan a{
display: block;
margin-left: 116px;
}
</style>
</head>
<body>
<div class="haokan">
<a href="">找回密码</a>
</div>
</body>
</html>
Also shown below:
3, respectively, and the images of text into different div, html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.divs .imgs{
display: inline-block;
vertical-align: middle;
}
.divs .infos{
display: inline-block;
}
</style>
</head>
<body>
<div class="divs">
<div class="imgs"><img src="logo.jpg" alt=""></div>
<div class="infos"><a href="">找回密码</a></div>
</div>
</body>
</html>
It is shown below:
-------------------------------------------------------------------------------------------------------------------------------------
The first method is recommended.
Finish
Reprinted indicate reprint the words, mark the original author and the original Bowen address.