Home > Article > Web Front-end > How to align words and images in css
How to align words and pictures in css: 1. Align words and pictures by adding "vertical-align:middle;" of css; 2. Align words and pictures by setting a background image in css Alignment; 3. Put the text and pictures into different divs to align the words and pictures.
The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
Recommended: "css Video Tutorial"
In HTML code, sometimes you need to add an icon next to the text.
By default, the picture is aligned at the top and the text is aligned at the bottom. Therefore, the picture is usually high and the text is low, and cannot be horizontally aligned in the middle.
There are three common methods: 1. By adding "vertical-align:middle;" to CSS; 2. If the image is a background image, you can set the background image in CSS; 3. Separate the text and image into different divs. The above three methods can all display pictures and text on the same line. Let's use examples to apply them below.
1. Add the "vertical-align:middle" attribute
We use "Login" as an example in actual situations, make "Login" into a picture, and set "Retrieve Password" The written html code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<img src="logo.jpg" alt="" style="max-width:90%"><a href="">找回密码</a>
</div>
</body>
</html>Effect picture:
2. Set the picture as the background picture
If our picture If it is a background image, you can use "background" in css to set the image. The html code is as follows:
<!DOCTYPE html>
<html>
<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>
<a href="">找回密码</a>
</div>
</body>
</html>Rendering:
3 , put the pictures and text into different divs respectively. The html code is as follows:
<!DOCTYPE html>
<html>
<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>
<div><img src="logo.jpg" alt=""></div>
<div><a href="">找回密码</a></div>
</div>
</body>
</html>Rendering:
For more programming-related knowledge, please visit : Programming Teaching! !
The above is the detailed content of How to align words and images in css. For more information, please follow other related articles on the PHP Chinese website!