CSS Div Box WordPress Theme

Question

Привет Я работаю над темой wordpress, которая была сделана другим разработчиком без каких-либо заметок или документации, которую он оставил. В настоящее время я редактирую тему, основываясь на новых требованиях. Я не очень хороший парень, я работаю в основном на стороне бэкэнда. Поэтому мне нужна коробка Див или коробка, как это:

Это полупрозрачный черный ящик один, что мне нужно, и текст внутри:

мне удается сделать что-то вроде этого:

Но кажется, что мой бокс - это путь к высокому, могу ли я сделать его по центру? Кроме того, контент должен быть белого цвета. Вот мой код до сих пор:

<div class="about_area" id="about"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 sec_headding text-center"> 
      <!-- <h1> 
       <span></span><?php the_title(); ?><span></span> 
      </h1> --> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="col-md-12 aboutbox"> 
       <div class="about_content"> 
        <h3 class="about_header">RED DELA CRUZ</h3> 
        <hr align="center"/> 
        <p class="lead"><?php the_field('subtitle'); ?></p> 

        <p><?php the_content(); ?></p> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

Содержание вы видите в поле генерируется

<?php the_field('subtitle'); ?> 

Мой CSS

.bxslider img{ 
    width:100%; 
} 
.about_area{ 
    padding-bottom:105px; 
    background-color: #b0c4de; 
    background-image: url('../images/about_bg.jpg'); 
} 

.about_area .bx-wrapper .bx-viewport{ 
    margin-bottom: 20px; 
} 

.aboutbox { 
    background-color: #000000; 
    opacity: 0.6; 
    position: relative; 

} 

.about_content { 
    color: #FFFFFF; 
} 

.about_header { 
    text-align: center; 
    font-size: 33px; 
} 

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #FFFFFF; 
    margin: 1em 0; 
    padding: 0; 
    /*width: 820px;*/ 
    width: 60%; 
    margin: 0 auto; 
} 

Answer 1

Я думаю, что вы имеете в виду «Как для центрирования div Horizontally ", и вы найдете множество решений по этому предыдущему вопросу: How to horizontally center a <div> in another <div>?

Если я ошибаюсь, и вы имели в виду что-то еще, дайте мне знать.

Answer 2

вы можете попробовать это:

bxslider img{ 
    width:100%; 
} 
.about_area{ 
    padding-bottom:105px; 
    background-color: #b0c4de; 
    background-image: url('http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png'); 
} 

.about_area .bx-wrapper .bx-viewport{ 
    margin-bottom: 20px; 
} 

.aboutbox { 
    background-color: #000000; 
    opacity: 0.6; 
    position: relative; 

} 

.about_content { 
    color: #FFFFFF; 
} 

.about_header { 
    text-align: center; 
    font-size: 33px; 
} 

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #FFFFFF; 
    margin: 1em 0; 
    padding: 0; 
    /*width: 820px;*/ 
    width: 60%; 
    margin: 0 auto; 
} 

#one, #two, #three { width: 33.3%; } 
#one, #two { float: left; } 
#three { float: right; clear: none; } 

#one, #three { 
width: 250px; 
min-height: 150px; 
margin-top:-73px; 
border: 4px solid gold; 
background:red; 
/*to reduce float drop issues in IE*/ 
word-wrap: break-word; 

} 
#two { 
    margin-top:-35px; 
width: 150px; 
min-height: 50px; 
margin-bottom:45px; 
border: 4px solid gold; 
background:#C2DAD7; 
/*to reduce float drop issues in IE*/ 
word-wrap: break-word; 
    margin-left:420px; 
    position:fixed; 
} 
p{ 
    margin-top:-175px; 
    position:fixed; 
} 

Fiddle Demo

Answer 3

Чтобы сделать фон окно прозрачным, а не текст, изменить .aboutbox-класс к этому:

.aboutbox { 
    background-color: #000000; 
    background-color: rgba(0, 0, 0, 0.6; 
    position: relative; 
    margin-top:100px; 
} 

И то я добавил маркер к верхней части коробки, чтобы получить лица женщин, свободных от коробки.