! <- that white on a knowledge point:
single line of text is center-:
1, set the parent element is inline elements: Run the display: inline;
2, set the row height to the current parent element height: line-height = height to reality center - ->
copy the following code creates index.html page:
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> the Document </ title>
<style>
.bd> div {
margin-Top: 30px;
}
. {FL
a float: left;
}
.clearfix: {After
the display: Block;
Content: "";
Clear: both;
}
/ * .container: first Child-written is wrong, any of the following first parent element .container child element
so very different, not to put fault. This is a descendant selectors are not familiar with.
.container> span: first-child represents: a parent element under the first span .container styling elements
* /
.container> span: first-child {
the display: inline-Block;
background: # f0f URL ( '../ img / logo.png ') center center scroll ;
height: 85px;
}
.logo {
the display: inline-Block;
/ * Center Center represents an intermediate image display * /
background: # f0f URL ( '../ IMG / logo.png') Center Center Scroll;
background-size: Cover ; / * represents a background image for display in the region of all see * /
width: 85px;
height: 85px;
}
{.middle
the display: inline;
Vertical-align = left: Middle;
Line-height: 85px;
}
</ style>
</ head>
<body>
<div class = "BD">
<- - clearfix clear float!>
< class = div "Container clearfix">
<-! FL is floating here ->
<span class = "logo FL"> </ span> <span> here is floating, the text in the block behind the top edge </ span> <span> | </ span> <span> customer service </ span>
</ div>
<- - this is not floating!>
<div>
<span class = "logo"> </ span> <span> this is not a floating behind the text box at the bottom </ span> <span> | </ span> <span> customer service </ span>
</ div>
</ div>
<HR / >
<div class = "BD">
<-! clearfix clear float ->
<div class = "Container clearfix">
<-! FL is floating here ->
<span class = "logo FL"> </ span>
<xxxxxx class = "Middle">
<span> This line is centered, must be a single line, so long as the parent element into the line elements, line-height = height </ span> <span > | </ span> <span > customer service </ span>
</ xxxxxx>
</ div>
! <- there is no floating ->
<div>
<span class = "logo"> </ span> <span> this is not a floating behind the text box at the bottom </ span> <span> | </ span> <span> customer service </ span>
</ div>
</ div>
</ body>
< / html>