css3的居中,flex和普通的悬挂布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>悬挂布局</title>
<meta charset="utf-8">
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.left {
position: fixed;
left: 25%;
top: 50%;
transform: translate(-50%, -50%);
}
.right {
position: fixed;
left: 75%;
top: 50%;
transform: translate(-50%, -50%);
}
.hrLine {
height: 100%;
width: 2px;
border: 1px dotted lightblue;
position: fixed;
left: 50%;
}
.Media {
width: 200px;
display: flex;
align-items: flex-start;
}
.Media-figure {
margin-right: 1em;
}
.Media-body {
flex: 1;
display: block;
}
.container {
padding-top: 40px;
width: 300px;
height: 100px;
border: 1px dotted blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.content {
text-align: center;
}
.channel {
display: inline-block;
width: 82px;
vertical-align: top;
}
.channel-container {
display: inline-block;
width: 60%;
word-break: break-all;
}
.channel-container label {
margin-right: 10px;
}
.channel-container label input {
margin-right: 16px;
width: auto;
height: auto;
line-height: inherit;
text-indent: 0;
}
</style>
</head>
<body>
<div class="left">
<div class="Media">
<img class="Media-figure" src="images/adper_pic.png" height="30" width="30" alt="">
<div>
<p class="Media-body">figure adasd asdwad adsda dawsdaf adsdfa a dasd </p>
<div style="margin-top:10px;">
<label>
<input type="radio" name="website" data-name="news" value="1">新闻</label>
<label>
<input type="radio" name="website" data-name="zy" value="2">测试</label>
<label>
<input type="radio" name="website" data-name="finance" value="3">财经</label>
<label>
<input type="radio" name="website" data-name="tech" value="4">科技</label>
</div>
</div>
</div>
</div>
<hr class="hrLine">
<div class="right">
<div class="container">
<div class="content">
<div class="channel">所属频道:</div>
<div class="channel-container">
<label>
<input type="radio" name="website" data-name="news" value="1">新闻</label>
<label>
<input type="radio" name="website" data-name="zy" value="2">测试</label>
<label>
<input type="radio" name="website" data-name="finance" value="3">财经</label>
<label>
<input type="radio" name="website" data-name="tech" value="4">科技</label>
</div>
</div>
</div>
</div>
</body>
</html>