Home/ Questions/Q 8675355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T19:55:47+00:00

i am developing a mobile HTML5 page with css3, i am having the page

  • 0

i am developing a mobile HTML5 page with css3, i am having the page like below

<!DOCTYPE html>
<html>
    <head>
        <title>Starter page</title>
        <style>
            .float-right{float:right}
            .float-left{float:left}
            .clear{clear:both}
        </style>
    </head>

    <body>
    <div class="content" id="home">

            <div class=" ">
            <!--START: Div to be centered to page-->
                <div class="DivToBeCentered">
                    <div class="float-left">
                        <!--START: This paragraph content is dynamic from database, i want to center align the div with the class 
                                    DivToBeCentered with reference to its parent-->
                        <p class="">dynamic para 1 with background image</p>
                        <!--END: This paragraph content is dynamic from database, i want to center align the div with the class 
                                    DivToBeCentered with reference to its parent-->
                    </div>
                    <div class=" float-left">
                        <p class="">static para 2 without background image</p>
                    </div>
                    <div class="clear"></div>
                </div>
            <!--END: Div to be centered to page-->
            </div>

    </div>
    </body>
</html>

I want to horizontally center align the div with the class “DivToBeCentered” in the code above to its parent div. Inside that div there are two paragraph tags,for one paragraph tag content is dynamic, so its width may change while loading the page, how do i center align the that div with the class “DivToBeCentered” to its parent. it will be more helpful for me if you solve this, i got stuck in this issue for the day.Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    simple solution will be display: inline-block; to the DivToBeCentered and text-align:center; to the outer div

    DEMO

    Css to be changed

    .outer {text-align:center;}
.DivToBeCentered {display: inline-block;}




<html>
    <head>
        <title>Starter page</title>
        <style>
            .float-right{float:right}
            .float-left{float:left}
            .clear{clear:both}
          .outer {text-align:center;}
          .DivToBeCentered {display:block-inline}
        </style>
    </head>

    <body>
    <div class="content" id="home">

            <div class="outer">
            <!--START: Div to be centered to page-->
                <div class="DivToBeCentered">
                    <div class="float-left">
                        <!--START: This paragraph content is dynamic from database, i want to center align the div with the class 
                                    DivToBeCentered with reference to its parent-->
                        <p class="">dynamic para 1 with background image</p>
                        <!--END: This paragraph content is dynamic from database, i want to center align the div with the class 
                                    DivToBeCentered with reference to its parent-->
                    </div>
                    <div class=" float-left">
                        <p class="">static para 2 without background image</p>
                    </div>
                    <div class="clear"></div>
                </div>
            <!--END: Div to be centered to page-->
            </div>

    </div>
    </body>
    • 0