CSS Div Box WordPress Theme

Question

Hi I am working on a wordpress theme which was made by other developer with no notes or documentation he left. I'm currently editing the theme based on the new requirements. I'm not a good css guy, I work primarily on the backend side of things. So I need a div box or box like this:

That translucent black box is one that I need and the text inside:

I manage to make something like this:

But seems my box is way to high, can I make it on the center? Plus the content should be in white colored font. Here's my code so far:

<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>

The content you see in the box is generated by

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

My 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

I think that you mean "How to center the div Horizontally" and you will find a plenty of solutions on this previous question: How to horizontally center a <div> in another <div>?

If I am wrong and you meant something else, let me know.

Answer 2

you can try this one:

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

To make the box background transparent and not the text, change the .aboutbox-class to this:

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

And then I have added a margin to the top of the box, to get the womens faces free of the box.