How to keep block elements inline and also correctly centered?


Tags: html,css

Problem :

Trying to have 3 divs on one line, each with an image that is centered within it's allocated third of the page. They all seem to be a bit too far to the left. Also, how do I center them vertically within the div?

current results current results

Here's the code.

HTML

<div class="block">
        <div class="left">
            <img class="swork" src="100.jpg"/>
        </div>
        <div class="center">
            <img class="swork" src="010.jpg"/>
        </div>
        <div class="right">
            <img class="swork" src="001.jpg"/>
        </div>
</div>

CSS

.swork {
max-width: 300px;
max-height: 500px;
}

.block {
    width: 100%;
    height: 350px;
}

.left {
    display: inline-block;
    width: 33%;
}

.center {
    display: inline-block;
    width: 33%
}

.right {
    display: inline-block;
    width: 33%;
}


Solution :

Add vertical-align: middle and text-align: center to the styles for each child div.


    CSS Howto..

    How to do auto slide for divs [closed]

    How do I change the background on mouse over immediately?

    How to separate content and presentation layers on JSPs?

    popup mask is very very quickly shown

    How do I get text side by side in HTML inside div?

    CSS Border Color: How to set bottom border color?

    How to have a css element with transitions except initially?

    How do you right-align text into a column?

    How to expand an abbreviated word onhover in html via css or javascript or even using jquery?

    How to get a CSS selector in PHP?

    How to fit your website for all or at lest most screen resolutions?

    How do I get my links to glow on :hover with CSS3? [duplicate]

    How to apply a fixed backgound in fullpage.js

    How to display components horizontally with CSS

    How to get the CSS-Code and save in a String?

    How to Indent using HTML or CSS

    How to stop the css attribute font-size to get override from external style sheet universal selector

    how do i edit my CSS to show following things please [closed]

    How to create a clickable block?

    How to get css and django working on live server

    How to adjust CSS to make footer fixed height?

    How to fix smooth text in IE?

    how to select image using css

    how to move canvas along with a centered canvas

    Why jQuery.css does not apply a property if it is not supported and how is this being checked?

    How to right align a flipswitch in jquery mobile 1.4.5

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How do i create a gem which will generate a css file from a template

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    How can i disable the bootstrap hover color for links