CODEWITHSUNDEEP
htmlcss
user1788542
user1788542

Reputation:

Vertical alignment html element

I put image inside div->td element to show just below header.

Fiddle : Link

 <body>
        <div class="page-header header">
            <h1 class="page-header-text">thenwat</h1>
        </div>
            <table border="0" width="100%">
                <tr>
                    <div class="left">
                        <td style="width:15%" valign= "top">

                            <div class="media">
                                <img class="media-object" src="http://placehold.it/200x200" alt="Profile pic">
                            </div>
                        </td>
                    </div>
                    </tr>
                </table>
<body>

But it show small space between header and image. what is it?

Upvotes: 0

Views: 72

Answers (7)

Roopendra
Roopendra

Reputation: 7776

You have given margin in .page-header. You can change.page-header css or overwrite css as you .header class already there

Working Demo

Upvotes: 0

kamesh
kamesh

Reputation: 2424

If you want to use the same code means just try line-height css in your tag

Upvotes: 0

Manoj
Manoj

Reputation: 1890

.page-header is having margin. give margin: 40px 0px 0px 0px;

DEMO

<div class="page-header header" style="margin: 40px 0px 0px 0px;">

Upvotes: 0

Aditya
Aditya

Reputation: 107

in youre css you find a css class named .page-header

your code looks like

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

you just replace with 

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 0;
}

i think it should work that you want

Upvotes: 0

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

I believe that it's just a margin of your .header.

Fiddle

CSS

.header{margin-bottom:0}

Upvotes: 2

Richa
Richa

Reputation: 4270

your .page-header is having margin. remove that.

.page-header {
    border-bottom: 1px solid #EEEEEE;
   /* margin: 40px 0 20px;*/
    padding-bottom: 9px;
}

Upvotes: 1

Sebin Simon
Sebin Simon

Reputation: 1646

remove all tables its not good practice
use div/li

set parent div style 'display:table'
and set child div style display:table-cell;vertical-align: middle;

Upvotes: 1

Related Questions