How to vertically align middle some header text between 2 header images on a website?


Tags: css,center,vertical-alignment

Problem :

Here is the url: www.dealflurry.com I want to use css. I cannot figure out how to get the header text that says "Deal Flurry" to be vertically in the middle between the 2 images around it. The text is staying at the bottom of the images instead of being in the middle. I have tried putting the text and images in div's but that didn't work the way I did it. I would appreciate any help!



Solution :

add vertical-align: middle; to both your images in a class or an inline style (preferably a class) and it will fix it.

Below is your complete updated header div code using inline styles:

<div class="header">

<img height="200" src="http://www.dealflurry.com/images/HiRes.jpg" style="vertical-align: middle;">

Deal Flurry

<img height="200" src="http://www.dealflurry.com/images/balloons.jpg" style="vertical-align: middle;">

</div>

    CSS Howto..

    How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

    How to switch fixed elements when scrolling down the page

    How To Prevent CSS Background Image From Moving When Shown?

    How to Scale Down a Large Image Using HTML and/or CSS

    CSS: How to crop image that has any size?

    How do browsers parse/render CSS?

    CSS Media Queries: How to make the right column display above the left on small screens?

    How to add contact details next to responsive Google Map

    TW Bootstrap: How to overflow columns

    CSS: When I add a button to my container, my layout breaks, how to avoid this?

    How to make my

    How to set textbox width fit in table cell CSS

    How to change color and background of whole web site

    How to edit horizantal drop down menu

    How can I show only a section of a video frame with CSS or JavaScript?

    how to place an image at the center of the browser irrespective of the resolution?

    HTML, CSS: How do I stretch an element up to the edge of the page?

    How to change select element's background color when it's selected?

    How to display half of a character(html entity) using css (and if required jquery)

    How to separate content and presentation layers on JSPs?

    How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?

    How to exclude Hover for Active LI (Menu)?

    How to code a drop down menu in css?

    How to draw a shape using a piece of image in php

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

    How to add CSS if element has more than one child?

    How can I prevent this plugin from popping up from behind the content area?

    How do I learn what changes my css values?

    How do I code a close link to js accordion panels?