<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
/>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<
title
>图片与文字垂直对齐
</
title
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<
link
rel=
"stylesheet"
type=
"text/css"
media=
"screen"
href=
"main.css"
/>
<
script
src=
"main.js"
>
<
/
script
>
<
style
type=
"text/css"
>
.one{
width:
600px;
height:
500px;
border:
1px
solid
red;
}
.one img{
margin-top:
10px;
vertical-align:
middle;
}
.three{
width:
300px;
height:
300px;
border:
1px
solid
red;
display:
none;
/* 将元素进行隐藏 */
/* visibility: hidden;*/
/* 将元素进行隐藏 */
}
.four{
width:
30px;
height:
30px;
border:
2px
solid
blue;
}
<
/
style
>
</
head
>
<
body
>
<!-- 每一种inlne-block元素 都有一个默认的vertical-align:baseline
☞vertical-align:middle 垂直对齐。 vertical-align与inline-block更搭配。 -->
<
div
class=
"one"
>
<
img
src=
"12.jpg"
><
span
>文字标题
</
span
>
</
div
>
<
br
>
<
br
>
<
div
class=
"three"
>
<!-- Css可见性
☞overflow: hidden 将超出部分进行隐藏
☞display: none 直接将元素隐藏
display:block 将元素显示(与js配合更搭)
☞visibility:hidden 将元素隐藏
display: none; 将元素隐藏后不占位置
visibility: hidden; 将元素隐藏后占原来的位置
-->
</
div
>
<
div
class=
"four"
>
</
div
>
</
body
>
</
html
>