CODEWITHSUNDEEP
cssalignmentvertical-alignment
Greg
Greg

Reputation: 3063

Vertical alignment of a text next to an image

On my website http://goo.gl/16XdA (section "about us") I'd like to have the blue title vertically aligned with the norway flag on its left. I've tried to play with padding-bottom and margin-bottom (to move the blue title a few px up) but that did not work at all. Any idea? Tks

CSS

#activity-container {
    width: 600px;
    background-color: #FFFFFF;
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color:#000;
    font-weight: 400;
    padding:25px;
    margin-left: auto;
    margin-right: auto;
    border: 1px dotted #666;
    background: #fff url(../images/norway-map.png) no-repeat right top;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";
    filter: alpha(opacity=93);
    opacity: 0.93; /* For IE8 and earlier */
}

HTML 

<div id="activity-container">
    <p><img src="images/norway-flag-small.jpg" alt="Picture" /><span class="activity-title">Swoåsa , naturlig mineralvann, ren natur</span></p>
    <br />
    <p>XXZ AS was founded</p>
  </div>

Upvotes: 0

Views: 746

Answers (1)

Greg
Greg

Reputation: 21909

Use vertical-align: middle on the flag image, this will place the text vertically central to the image. At the moment, the property is being set to vertical-align: baseline from your reset.css file.

Upvotes: 1

Related Questions