The effect is as follows
Thus wrote up, of course, still write for a long time, can not help but spit out the layout of what seems to be white learning.
Use Flex at the beginning, because the picture needs to be horizontally vertically centered, so it gives priority to the convenient flex layout pattern seen yesterday.
Here see the flex layout, then feel that the code is very short and convenient, and then used (visible Flex version).
In flex, only need to margin:auto a line of code can achieve the center effect of each azimuth.
And then, MI neon, ⒏?⌒, wat? E11, not even ... I thought that only the old browser could not, it seems that the sentence is true:
The new Flexbox layout pattern is used to redefine how the layout in the CSS is laid out. Unfortunately, there have been too many changes in the specification recently, resulting in different browsers implementing it. But I still want to share some examples to let you know about the changes that are about to happen. These examples are currently available only in Chrome browsers that support Flexbox, based on the latest standards.
↑ Obviously in my Firefox also can this play the same kind of time when it was written ah.
Later also tried to write a response, write a sudden discovery, the picture becomes small is true, but small to the end can not see AH hello ... And because it is oblique, positioning is not convenient, so later still adopted a fixed way, but there is a place worthy of Mark:
Background:url (/cdn.jpg) no-repeat;
Background-position:center;
Background-size:contain;
Background-size:contain can make the background become adaptive (that is, picture scaling).
Of course, finally chose the absolute (please see yesterday's last article), completely fixed way, slightly rough positioning a bit, but overall is already the most satisfying effect of the:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>hokster cdn</title>
<style type= "Text/css" >
HTML, Body {
margin:0 Auto;
padding:0;
height:100%;
width:100%;
}
HTML, body, Div, IMG, p {
Box-sizing:border-box;
}
. container {
margin:0 Auto;
height:100%;
}
. Container > IMG {
Margin:auto;
Position:absolute;
top:0;
left:0;
bottom:0;
right:0;
Box-sizing:unset;
}
. container > Content {
bottom:0;
Box-sizing:unset;
left:0;
Margin:auto;
Position:absolute;
right:0;
top:0;
height:575px;
width:1115px;
}
. vertical {
position:relative;
margin:0 Auto;
Text-align:center;
height:340px;
width:780px;
Box-sizing:unset;
padding-right:100px;
padding-top:250px;
Vertical-align:center;
font-family: "Microsoft Yahei";
}
</style>
<body>
<div class= "Container" >
<div class= "Content" >
<div class= "Vertical" >
<P>CDN can not complete this request to say! The following is a detailed reason:</p>
<p> current CDN node could not find host id! according to the domain name you requested </p>
<p> If you just bind the domain name, please wait 5 minutes to view, continue to appear this tip please contact Hostker </p>
</div>
</div>
</div>
</body>
So, the layout really makes people vomit blood, next, today will also update some about the layout of the article.
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
