How to align a DIV vertically inside another dIV

Question

<div class="dispLoginSearch">
    <div class="theLoginBox">
        <span class="loginTitle">
            Log in to <span style="font-family: 'blackjarregular'; font-size: 14pt; color: #FE7816;">My</span> <span style="font-family: 'trajanpro'; font-size: 12pt; color: #00529B;">WD</span> | Sign Up
        </span>
    </div>
</div>

CSS:

.dispLoginSearch
{
    width: 47%;
    height: 100%;
    float: right;
    text-align: right;
    padding-right: 2%;
}
.theLoginBox
{
    border: 2px solid #D5D5D5;
    border-radius: 10px;
    width: 440px;
    height: 125px;
    float: right;
    padding: 10px;
    vertical-align: top;
}
.loginTitle
{
    font-weight: bold;
    text-align: left;
    background: #808080;
}

displays:

enter image description here

What I am looking to do is the following:

enter image description here

How can I modify my code to achieve the above where the Log in... is top left followed by the form?

possible duplicate of [vertical alignment of div inside another - issue](http://stackoverflow.com/questions/13222687/vertical-alignment-of-div-inside-another-issue) — TylerH, Aug 25 '14 at 19:57
You literally could not have picked a more duplicated topic: http://stackoverflow.com/questions/13222687/vertical-alignment-of-div-inside-another-issue or http://stackoverflow.com/questions/22208538/aligning-div-inside-another-div or http://stackoverflow.com/questions/7572420/how-to-vertical-and-horizontal-align-a-div-inside-another-div or http://stackoverflow.com/questions/7446077/how-to-vertically-align-div-inside-another-div-without-displaytable-cell — TylerH, Aug 25 '14 at 19:57

i.rijad · Answer 1 · 2014-08-25T20:11:27.077

1

    .divToBeCentered{
         margin-left:auto;
         margin-right:auto;
         position:relative
     }

oh sorry... i am gonna rewrite this

here it is jsfiddle link

edited Aug 25 '14 at 20:11

answered Aug 25 '14 at 19:57

i.rijad

36
6

I am not looking to center it I am looking to start from the top and work my way down as shown in the second image... – SearchForKnowledge Aug 25 '14 at 19:58
I will post my JSFiddle in a min. Thank you – SearchForKnowledge Aug 25 '14 at 20:21
This is my fiddle: http://jsfiddle.net/Lstk96qL/ (As you can see there is something going on there) How can I fix it? Thanks. – SearchForKnowledge Aug 25 '14 at 20:28
I have done it for U... just add your text..look at it here http://jsfiddle.net/abukxh9q/2/ – i.rijad Aug 25 '14 at 20:34
Thank you. The thing is I need the height to be there to ensure I can fit another DIV right underneath it. – SearchForKnowledge Aug 25 '14 at 20:35
add it to my code and send it to me agein after U save it..I am not sure if I understan U – i.rijad Aug 25 '14 at 20:39
I need to work with the `150px` dimension to fir the rounded box and everything inside :) – SearchForKnowledge Aug 25 '14 at 20:39
Here is what I have in my own page: http://jsfiddle.net/v73ohg74/. As you can see THIS IS A SAMPLE text appears middle of DIV instead of top left... – SearchForKnowledge Aug 25 '14 at 20:43
The Login box is inside another DIV which has a set height for DIV and that is where my code will conflict with yours. Thank you for trying to help me btw. Did you look at my JSFIDDLE link? – SearchForKnowledge Aug 25 '14 at 20:49
line-height:150px in .siteInfo? ...your code is mess – i.rijad Aug 25 '14 at 20:51
How would you recommend me fixing it? – SearchForKnowledge Aug 25 '14 at 22:57
start all over again..make plan..you can use my code as an example – i.rijad Aug 26 '14 at 05:52

How to align a DIV vertically inside another dIV

1 Answers1