Clever Geek Handbook

Centering a block of images

Need help centering the image block. Here is an image of how I want it to look. I tried margin: 0, auto; and has different fields, but it doesn't seem to work.

Any ideas and I'd really appreciate it!

Center a block of Images

http://jsfiddle.net/tcd1s7xm/

    h1 {
    padding-top: 3%;
    padding-bottom: 3%;
    text-transform: uppercase;
    color: #58585B;
    font-weight: 500;
    text-align: center;
    font-size: 24px;
}

p {
    max-width: 80%; 
    min-height: auto;
    font-size: 14.5px;
    color: #58595B;
    line-height: 2em;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;


}
.break {
    padding-bottom: 3%;
}

.info-wrap {
    background-color: #EDEDED;
}

 .info-wrap img   {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.work {


}

.posts {

        display: inline-block;



}

.work-img {
padding: 0;


}

    <div class="work">

                <div class="row">
                    <h1>My Work</h1>
                </div>


                <div class="posts">
                    <div class="row">
                        <div class="large-6 columns work-img"><img alt=
                        "People Portraits" src="img/people.png"></div>

                        <div class="large-6 columns work-img"><img alt="Murals"
                        src="img/murals.png"></div>
                    </div>

                    <div class="row">
                        <div class="large-6 columns work-img"><img alt=
                        "Animal Portraits" src="img/animal.png"></div>

                        <div class="large-6 columns work-img"><img alt=
                        "Canvas Paintings" src="img/canvas.png"></div>
                    </div>

                    <div class="row">
                        <div class="large-6 columns work-img"><img alt="Surface Design"
                        src="img/surface.png"></div>

                        <div class="large-6 columns work-img"><img alt=
                        "Tromp L'oeil" src="img/tromp.png"></div>
                    </div>
 </div>
 <div class="break"></div>
+3


source to share


2 answers


Are you using Foundation 5? Because if you are, you should probably be nesting images in a big-12 div. And I think there are too many lines. For example, you can try:

    <div class="posts">
        <div class="row">

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt=
                    "People Portraits" src="img/people.png"></div>

                <div class="large-6 columns work-img"><img alt="Murals"
                    src="img/murals.png"></div>
            </div>

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt=
                    "Animal Portraits" src="img/animal.png"></div>

                <div class="large-6 columns work-img"><img alt=
                    "Canvas Paintings" src="img/canvas.png"></div>
                </div>

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt="Surface Design"
                    src="img/surface.png"></div>

                <div class="large-6 columns work-img"><img alt=
                    "Tromp L'oeil" src="img/tromp.png"></div>
            </div>

        </div>
    </div>


And then maybe try margin: 0 auto on a working image in CSS, or if that doesn't work try putting the class on big-12 by adding the class name before big-12 and making the margin: 0 auto. It's pretty hard without the images in the jsfiddle.

0


source


You can try a combination display: inline-block

and text-align: center

to achieve the desired.

For example:

HMTL:



<div class="wrapper">
    <div class="row">
        <div class="image">
            <!-- image link and etc -->
        </div>
        <div class="image">
            <!-- image link and etc -->
        </div>
    </div>
    <div class="row">
        <div class="image">
            <!-- image link and etc -->
        </div>
        <div class="image">
            <!-- image link and etc -->
        </div>
    </div>
    <div class="row">
        <div class="image">
            <!-- image link and etc -->
        </div>
        <div class="image">
            <!-- image link and etc -->
        </div>
    </div>
</div>

CSS

.wrapper {
    text-align: center;
}

.wrapper .row {
    display: inline-block
}
0


source






More articles:


All Articles