How to set align of elements to center with css?


Tags: html,css3

Problem :

I try to set align of elements that exist into div tag with dark class to center.I have an image and a div element with img-circle class that most be in center (vertical,horizontal). Please advice.
See Demo on

http://jsfiddle.net/hmahdavi921/94nfxyz8/

css:

 .img-circle img {
    top: 50%;
    left: 50%;
    border: 6px solid #b9b7b7;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);

}

.dark {
    position: relative;
    z-index: 2;
    overflow: hidden;

}

div.dark:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

div.dark:hover:after {
    height: 0%;
    width: 0%;
}

html:

<div class="dark img-circle">
    <div>

        <div id="dnn_ctr428_ContentPane" class="img-circle">
            <h3>نام من</h3>
            <p>توضیحات من </p>
            <button class="btn btn-primary">بیشتر ...</button>
        <!-- Start_Module_428 --><div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
    <img class="img-responsive" alt="" src="http://www.dnnskin.net/portals/631/team3.png" height="279" width="446">
</div>

</div><!-- End_Module_428 --></div>
    </div>
</div>

If you need to change position of this tags

 <h3>نام من</h3>
            <p>توضیحات من </p>
            <button class="btn btn-primary">بیشتر ...</button>

do it.no problem



Solution :

I have a simple solution 1- add new div with absolute positionfor

        <h3>نام من</h3>
        <p>توضیحات من </p>
        <button class="btn btn-primary">بیشتر ...</button>

new code

<div style="position:absolute; width: 100%;text-align: center">
        <h3>نام من</h3>
        <p>توضیحات من </p>
        <button class="btn btn-primary">بیشتر ...</button>
</div>

2- add style tyle="text-align: center;" to div with id dnn_ctr428_HtmlModule_lblContent

<div id="dnn_ctr428_HtmlModule_lblContent" class="Normal" style="text-align: center;">

See demo here


    CSS Howto..

    How can I change the entire background color of a page?

    How to prevent inner text resizing in CSS Animation @keyframes?

    how to get a CSSStyleSheet object from a