我有一个页面，我已从页面中取出一些元素以使其符合我的目的（关于页面）但是，我似乎没有看到CSS在哪里可以将容器置于中间位置这页纸。我尝试过做位置：中心以及我在网上阅读的其他代码技术但是他们似乎都想工作。
有人能告诉我我犯了哪些错误。
/* Latest News Area css
============================================================================================ */
.latest_news_area {}
.l_news_inner {}
.l_news_item {
@include transition;
.l_news_img {
overflow: hidden;
a {
display: block;
}
img {
@include transition;
&:hover {
transform: scale(1.05);
}
}
}
.l_news_content {
border: 1px solid #ebebeb;
border-top: 0px;
padding: 30px 35px;
h4 {
font-size: 18px;
color: $dip;
font-family: $pop;
font-weight: 500;
@include transition;
&:hover {
color: #2bc0a4;
}
}
p {
font-size: 14px;
line-height: 26px;
color: $pfont;
font-family: $pop;
font-weight: 400;
padding: 15px 0px 10px 0px;
}
}
&:hover {
box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);
}
}
/* Latest News Area css
============================================================================================ */
/* Static Area css
============================================================================================ */
.static_area {
padding: 100px 0px;
}
.static_inner {}
.static_main_content {
position: relative;
.static_social {
position: absolute;
left: -60px;
top: 0px;
}
}
.static_social {
ul {
li {
margin-bottom: 20px;
a {
height: 30px;
width: 30px;
text-align: center;
background: #4c65a8;
color: #fff;
display: block;
border-radius: 50%;
line-height: 30px;
}
&:nth-child(2) {
a {
background: #41a1f6;
}
}
&:nth-child(3) {
a {
background: #f43535;
}
}
&:nth-child(4) {
a {
background: #8f6247;
}
}
&:nth-child(5) {
margin-bottom: 0px;
a {
background: #f0c605;
}
}
}
}
}
.static_text {
padding-top: 35px;
padding-bottom: 15px;
p {
font-size: 16px;
line-height: 26px;
color: $pfont;
font-family: $pop;
&:last-child {
padding-top: 15px;
}
}
}
.static_text2 {
h3 {
font-size: 24px;
color: #1e1e27;
font-family: $pop;
font-weight: 500;
}
p {
font-size: 16px;
line-height: 26px;
color: $pfont;
font-family: $pop;
padding-top: 13px;
}
}
.media {
margin: 30px 0px;
.d-flex {
h6 {
font-family: $play;
font-size: 100px;
color: $baseColor;
line-height: 75px;
}
}
.media-body {
padding-left: 32px;
p {
font-size: 18px;
line-height: 26px;
color: #1e1e27;
font-family: $pop;
}
h5 {
font-size: 14px;
color: #b5aec4;
font-family: $pop;
padding-top: 15px;
a {
font-size: 16px;
color: $dip;
font-family: $pop;
font-weight: 500;
@include transition;
&:hover {
color: $baseColor;
}
}
}
}
}
.right_sidebar_area {
padding-left: 20px;
}
.right_widget {
margin-bottom: 45px;
}
.r_w_title {
padding-bottom: 20px;
h3 {
font-size: 22px;
color: #1e1e27;
font-family: $pop;
font-weight: 500;
}
}
.r_news_widget {
.news_inner {
.news_item {
border-bottom: 1px solid #eeeef0;
padding-bottom: 14px;
margin-bottom: 15px;
h4 {
font-size: 16px;
line-height: 26px;
font-family: $pop;
font-weight: 500;
color: #1e1e27;
padding-bottom: 7px;
@include transition;
&:hover {
color: $baseColor;
}
}
h6 {
font-size: 14px;
color: #b5aec4;
font-family: $pop;
}
&:last-child {
margin-bottom: 0px;
}
}
}
}
.r_cat_widget {
ul {
li {
margin-bottom: 12px;
a {
font-size: 16px;
color: #1e1e27;
font-family: $pop;
@include transition;
padding-left: 20px;
position: relative;
&:before {
content: "";
height: 8px;
width: 8px;
border-radius: 50%;
background: $baseColor;
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
@include transition;
}
}
&:hover {
a {
color: $baseColor;
&:before {
left: 5px;
}
}
}
}
}
}
.r_tag_widget {
ul {
margin-right: -9px;
li {
display: inline-block;
margin-bottom: 9px;
margin-right: 6px;
a {
font-size: 12px;
color: $pfont;
font-family: $pop;
background: #ebebeb;
display: inline-block;
padding: 0px 20px;
text-transform: uppercase;
line-height: 30px;
@include transition;
}
&:last-child {
margin-bottom: 0px;
margin-right: 0px;
}
&:hover {
a {
color: $baseColor;
}
}
}
}
}
/* End Static Area css
============================================================================================ */
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
&:hover,
&:focus {
text-decoration: none;
outline: none;
}
}
.row.m0 {
margin: 0px;
}
.p0 {
padding: 0px;
}
body {
line-height: 26px;
font-size: 14px;
font-family: $pop;
}
body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
padding: 0px;
}
#success {
display: none;
}
#error {
display: none;
}
.display_table {
display: table;
width: 100%;
}
.display_table_row {
display: table-row;
}
.display_table_cell {
display: table-cell;
float: none !important;
}
.p_100 {
padding: 100px 0px;
}
iframe {
border: none;
}
i {
&:before {
margin-left: 0px !important;
}
}
/* Container Custome Code css
============================================================================================ */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
/* End Container Custome Code css
============================================================================================ */
/* Main title css
============================================================================================ */
.main_title {
h2 {
font-size: 40px;
line-height: 48px;
font-family: $pop;
color: $dip;
font-weight: 500;
}
p {
font-size: 16px;
color: $pfont;
font-family: $pop;
line-height: 26px;
padding-top: 15px;
}
}
.center_title {
color: #fff;
text-align: center;
padding-bottom: 40px;
h2 {
font-size: 40px;
font-family: $pop;
font-weight: 500;
}
p {
font-size: 16px;
color: #fff;
font-family: $pop;
line-height: 26px;
padding-top: 10px;
}
}
.b_center_title {
text-align: center;
padding-bottom: 50px;
h2 {
font-size: 40px;
font-family: $pop;
font-weight: 500;
color: $dip;
}
p {
font-size: 16px;
color: #fff;
font-family: $pop;
line-height: 26px;
padding-top: 10px;
color: $pfont;
}
}
/* Main title css
============================================================================================ */<section class="static_area">
<div class="container">
<div class="static_inner">
<div class="row">
<div class="col-lg-9">
<div class="static_main_content">
<div class="static_img">
<img class="img-fluid" src="img/static-1.jpg" alt="">
</div>
<div class="static_text">
<p>Some text.</p><br>
<p>Some more text.</p><br>
<p>Even more text.</p><br>
<p>Wow... quite a lot of text</p><br>
</div>
<section class="testimonials_area p_100">
<div class="container">
<div class="testimonials_slider owl-carousel">
<div class="item">
<div class="media">
<img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
<div class="media-body">
<img src="img/dotted-icon-1.png" alt="">
<p>Some text.</p>
<h4><a href="#">Smith</a> - Human</h4>
</div>
</div>
</div>
<div class="item">
<div class="media">
<img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
<div class="media-body">
<img src="img/dotted-icon-1.png" alt="">
<p>Some more text.</p>
<h4><a href="#">Smith</a> - Human</h4>
</div>
</div>
</div>
<div class="item">
<div class="media">
<img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
<div class="media-body">
<img src="img/dotted-icon-1.png" alt="">
<p>Even more text</p>
<h4><a href="#">Smith </a> - Human</h4>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</section>
答案 0 :(得分：0)
没有position:center;这样的东西，你要做的是为容器定义一个静态宽度，然后用margin:0 auto;来居中它。
.container {
width:600px;
height:500px;
background:black;
margin:0 auto; /* this will center the container */
}<div class="container"></div>
答案 1 :(得分：0)
给出固定宽度并应用保证金：0 auto;
总是人们会问我如何将我喜欢的内容引用到这篇名为How to center things from W3C的帖子中。有用的信息如果您想了解一下。
/* Latest News Area css
============================================================================================ */
.latest_news_area {}
.l_news_inner {}
.l_news_item {
@include transition;
.l_news_img {
overflow: hidden;
a {
display: block;
}
img {
@include transition;
&:hover {
transform: scale(1.05);
}
}
}
.l_news_content {
border: 1px solid #ebebeb;
border-top: 0px;
padding: 30px 35px;
h4 {
font-size: 18px;
color: $dip;
font-family: $pop;
font-weight: 500;
@include transition;
&:hover {
color: #2bc0a4;
}
}
p {
font-size: 14px;
line-height: 26px;
color: $pfont;
font-family: $pop;
font-weight: 400;
padding: 15px 0px 10px 0px;
}
}
&:hover {
box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);
}
}
/* Latest News Area css
============================================================================================ */
/* Static Area css
============================================================================================ */
.static_area {
padding: 100px 0px;
}
.static_inner {}
.static_main_content {
position: relative;
.static_social {
position: absolute;
left: -60px;
top: 0px;
}
}
.static_social {
ul {
li {
margin-bottom: 20px;
a {
height: 30px;
width: 30px;
text-align: center;
background: #4c65a8;
color: #fff;
display: block;
border-radius: 50%;
line-height: 30px;
}
&:nth-child(2) {
a {
background: #41a1f6;
}
}
&:nth-child(3) {
a {
background: #f43535;
}
}
&:nth-child(4) {
a {
background: #8f6247;
}
}
&:nth-child(5) {
margin-bottom: 0px;
a {
background: #f0c605;
}
}
}
}
}
.static_text {
margin:0 auto;
width:50%;
padding-top: 35px;
padding-bottom: 15px;
width:50%;
p {
font-size: 16px;
line-height: 26px;
color: $pfont;
font-family: $pop;
&:last-child {
padding-top: 15px;
}
}
}
.static_text2 {
h3 {
font-size: 24px;
color: #1e1e27;
font-family: $pop;
font-weight: 500;
}
p {
font-size: 16px;
line-height: 26px;
color: $pfont;
font-family: $pop;
padding-top: 13px;
}
}
.media {
margin: 30px 0px;
.d-flex {
h6 {
font-family: $play;
font-size: 100px;
color: $baseColor;
line-height: 75px;
}
}
.media-body {
padding-left: 32px;
p {
font-size: 18px;
line-height: 26px;
color: #1e1e27;
font-family: $pop;
}
h5 {
font-size: 14px;
color: #b5aec4;
font-family: $pop;
padding-top: 15px;
a {
font-size: 16px;
color: $dip;
font-family: $pop;
font-weight: 500;
@include transition;
&:hover {
color: $baseColor;
}
}
}
}
}
.right_sidebar_area {
padding-left: 20px;
}
.right_widget {
margin-bottom: 45px;
}
.r_w_title {
padding-bottom: 20px;
h3 {
font-size: 22px;
color: #1e1e27;
font-family: $pop;
font-weight: 500;
}
}
.r_news_widget {
.news_inner {
.news_item {
border-bottom: 1px solid #eeeef0;
padding-bottom: 14px;
margin-bottom: 15px;
h4 {
font-size: 16px;
line-height: 26px;
font-family: $pop;
font-weight: 500;
color: #1e1e27;
padding-bottom: 7px;
@include transition;
&:hover {
color: $baseColor;
}
}
h6 {
font-size: 14px;
color: #b5aec4;
font-family: $pop;
}
&:last-child {
margin-bottom: 0px;
}
}
}
}
.r_cat_widget {
ul {
li {
margin-bottom: 12px;
a {
font-size: 16px;
color: #1e1e27;
font-family: $pop;
@include transition;
padding-left: 20px;
position: relative;
&:before {
content: "";
height: 8px;
width: 8px;
border-radius: 50%;
background: $baseColor;
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
@include transition;
}
}
&:hover {
a {
color: $baseColor;
&:before {
left: 5px;
}
}
}
}
}
}
.r_tag_widget {
ul {
margin-right: -9px;
li {
display: inline-block;
margin-bottom: 9px;
margin-right: 6px;
a {
font-size: 12px;
color: $pfont;
font-family: $pop;
background: #ebebeb;
display: inline-block;
padding: 0px 20px;
text-transform: uppercase;
line-height: 30px;
@include transition;
}
&:last-child {
margin-bottom: 0px;
margin-right: 0px;
}
&:hover {
a {
color: $baseColor;
}
}
}
}
}
/* End Static Area css
============================================================================================ */
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
&:hover,
&:focus {
text-decoration: none;
outline: none;
}
}
.row.m0 {
margin: 0px;
}
.p0 {
padding: 0px;
}
body {
line-height: 26px;
font-size: 14px;
font-family: $pop;
}
body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
padding: 0px;
}
#success {
display: none;
}
#error {
display: none;
}
.display_table {
display: table;
width: 100%;
}
.display_table_row {
display: table-row;
}
.display_table_cell {
display: table-cell;
float: none !important;
}
.p_100 {
padding: 100px 0px;
}
iframe {
border: none;
}
i {
&:before {
margin-left: 0px !important;
}
}
/* Container Custome Code css
============================================================================================ */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
/* End Container Custome Code css
============================================================================================ */
/* Main title css
============================================================================================ */
.main_title {
h2 {
font-size: 40px;
line-height: 48px;
font-family: $pop;
color: $dip;
font-weight: 500;
}
p {
font-size: 16px;
color: $pfont;
font-family: $pop;
line-height: 26px;
padding-top: 15px;
}
}
.center_title {
color: #fff;
text-align: center;
padding-bottom: 40px;
h2 {
font-size: 40px;
font-family: $pop;
font-weight: 500;
}
p {
font-size: 16px;
color: #fff;
font-family: $pop;
line-height: 26px;
padding-top: 10px;
}
}
.b_center_title {
text-align: center;
padding-bottom: 50px;
h2 {
font-size: 40px;
font-family: $pop;
font-weight: 500;
color: $dip;
}
p {
font-size: 16px;
color: #fff;
font-family: $pop;
line-height: 26px;
padding-top: 10px;
color: $pfont;
}
}
/* Main title css
============================================================================================ */<section class="static_area">
<div class="container">
<div class="static_inner">
<div class="row">
<div class="col-lg-9">
<div class="static_main_content">
<div class="static_img">
<img class="img-fluid" src="img/static-1.jpg" alt="">
</div>
<div class="static_text">
<p>Some text.</p><br>
<p>Some more text.</p><br>
<p>Even more text.</p><br>
<p>Wow... quite a lot of text</p><br>
</div>
<section class="testimonials_area p_100">
<div class="container">
<div class="testimonials_slider owl-carousel">
<div class="item">
<div class="media">
<img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
<div class="media-body">
<img src="img/dotted-icon-1.png" alt="">
<p>Some text.</p>
<h4><a href="#">Smith</a> - Human</h4>
</div>
</div>
</div>
<div class="item">
<div class="media">
<img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
<div class="media-body">
<img src="img/dotted-icon-1.png" alt="">
<p>Some more text.</p>
<h4><a href="#">Smith</a> - Human</h4>
</div>
</div>
</div>
<div class="item">
<div class="media">
<img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
<div class="media-body">
<img src="img/dotted-icon-1.png" alt="">
<p>Even more text</p>
<h4><a href="#">Smith </a> - Human</h4>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</section>