CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user3033194
user3033194

Reputation: 1831

Position well having another well in center of parent container

In my HTML page, I have a well, in which there is another well. The outer well should be in the center of the page, and the inner well in the center of the outer well. My code is given below:

        <div id="container">
            <div class="col-md-10"></div>
            <div class="well col-md-10">
                <p> Office name <span class="right-float">Your desk: <span id="desk-id">not set</span> </span></p>
                <hr>
                <div class="well col-md-6" align="center">
                    <p> <span class="glyphicon glyphicon-info-sign"></span>
                        Start your work by setting a name for your Desk</p>

                </div>
            </div>
            <div class="col-md-10"></div>
        </div>

It doesn't work; each well appears on the left-side of its respective parent. Does anyone know how I could position them centrally? Thanks in advance!!

Here's my CSS:

hr {
    border-color : #474343;
}

.header-dimensions {
    width: 110px;
    height: 50px;
}

.logoname-dimensions {
    display: inline;
    width: 115px;
    height: 40px;
}

.navbar-pad:{
    padding: 0;
}

.right-float{
    float: right;
}

Upvotes: 0

Views: 75

Answers (1)

user1583190
user1583190

Reputation:

What you are trying to do is kind of working against itself.

First off you apply the well class to the same element as the col-md-* element. This results in the whole element floating to the left (from the col-md-* class). You have to make sure that float is overridden in your own code.

Second, you can't use align="center" to center box elements. It works on text, but I think most people would recommend you to keep the centering in the CSS instead of the HTML.

So when you overridden the float and removed the align attribute I suggest you set a new class on both elements that should be centered and add margin: 0 auto; to that class.

Here is a pen that show how it could be done. The align="center" is removed and I've added the class well__centered to the elements. Check the CSS for the styling.

Upvotes: 1

Related Questions