is it possible to center the image in this code ?

odading · August 31, 2016

Hi,

Because I don't know how to do it in css, I use table and put a code which I found from the internet on how to "break" the column into row.

<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<style>
@media only screen and (max-width: 600px) {
/* Force table to not be like tables anymore */
table, td, tr {display: block; align: center}
}
</style>
</head>
<body>
<table cellpadding="10">
  <tr>
    <td> 
      <img src="http://dummyimage.com/240x160/000/fff" alt=""
onclick="document.getElementById('modal03').style.display='block'"></div>
<div id="modal03" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-closebtn w3-hover-red w3-container w3-padding-16 w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img src="http://dummyimage.com/600x400/000/fff" style="width:100%">
    </td>
    <td> 
      <div align="justify"><b><font color="0000FF">DONGDINGDANG</font></b><br>
        BLA BLA BLA BLA - BLUBLU<br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation <br>
        <br>
        <a href="#" style="text-decoration: none; color: blue">visit their website</a></div>
    </td>
  </tr>
</table>
</body>
</html>

A. If the screen below 600px, from the code above, the low-res image is "alone" located on the left of the screen - then under the image is the text.

B. If the screen more than 600px, the text under the image goes to the right of the image. (left is the image, right is the text).

What I want is on point-A which is : the low-res image location in the center of the screen (while the text still under the image).

Is it possible to do that ?

or is there css code that can do that without using the table ?

Maybe some one can help me to give the code if css can do that ?

Any kind of help would be greatly appreciated.

Thank you in advanced.

regards.

odading · August 31, 2016

Please never mind the question.

I've found from the internet by using flexbox.

Here is the code :

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
    //justify-content: center;
    align-items: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.main {
    text-align: left;
    //background: cornflowerblue;
}

.header {background: coral;}
.footer {background: lightgreen;}
//.aside1 {background: moccasin;}
.aside2 {background: violet;}

@media all and (min-width: 600px) {
    .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
    .main    { flex: 10 0px; }
    .aside1 { order: 1; }
    .main    { order: 2; }
    .aside2 { order: 3; }
    .footer  { order: 4; }
}
</style>
</head>
<body>

<div class="flex-container">
  <header class="header">Header</header>

  <aside class="aside aside1"><img src="http://dummyimage.com/300x200/000/fff.gif"></aside>

  <article class="main"><div align="justify">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.</p>
  </div></article>


  <footer class="footer">Footer</footer>
</div>

</body>
</html>

Thank you.

Ingolme · August 31, 2016

Flexbox won't work in most versions of Internet Explorer in use today.

dsonesuk · August 31, 2016

Well this is confusing? its gone from pop-up modal, with tables, to non-table and non modal layout, clearly your explanation was sooo unclear, even you didn't know what you wanted.

odading · September 1, 2016

Flexbox won't work in most versions of Internet Explorer in use today.

I don't know that .

Thank you for your information, Ingolme.

Well this is confusing? its gone from pop-up modal, with tables, to non-table and non modal layout, clearly your explanation was sooo unclear, even you didn't know what you wanted.

Sorry, I haven't put the pop-up in the flexbox code of my second post, dsonesuk.

Actually the pop-up is not my question but the centering.

When I found the flexbox code to center the image, so that's what I want then I share it here ... that's why I haven't put the pop-up code in the post before, which I did add the pop-up later in my webpage.

Also I'm sorry as because my poor English that's why it's difficult for me to explain it in English which is of course become soo unclear to all of my reader .

Anyway, thank you for telling me about this.

Edited September 1, 2016 by odading

dsonesuk · September 1, 2016

Something like this?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <title>Document Title</title>
        <script type="text/javascript">

        </script>
        <style type="text/css">
            body,html {height: 100%; padding:0; margin:0;background: lime;}
            .centre_vert_middle_inner{
                display: inline-block;
                vertical-align:middle;
                width: 98%;

            }
            .centre_vert_middle_inner_caption h1 {font-size: 2em; color: #00f;}


            .centre_vert_middle_outer {height: 100%; text-align: center;max-height: 100vh;}
            .centre_vert_middle_outer:after, .centre_vert_middle_outer:before {content: ""; height: 100%; display: inline-block; vertical-align:middle; width: 0; }
            .cvm_small,.cvm_large {vertical-align: middle;}
            .cvm_large {width: 100%; max-width: 900px;}
            .cvm_small {display: none;}
            .cvm_large, .centre_vert_middle_inner_caption > * {padding-left: 15px; padding-right: 15px; }

            @media only screen and (max-width: 600px) {
                body {background: red;}
                .cvm_large {display: none;}
                .cvm_small {display: inline-block;}

            }


        </style>
    </head>
    <body>
        <div class="centre_vert_middle_outer">
            <div class="centre_vert_middle_inner">
                <img class="cvm_small" src="http://dummyimage.com/240x160/000/fff" alt="">
                <img class="cvm_large" src="http://dummyimage.com/600x400/000/fff" alt="">
                <div class="centre_vert_middle_inner_caption">
                    <h1>DONGDINGDANG</h1>
                    <p> BLA BLA BLA BLA - BLUBLU<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation <br>
                    </p>
                    <a href="#" style="text-decoration: none; color: blue">visit their website</a>
                </div>

            </div>
        </div>
    </body>
</html>

odading · September 2, 2016

Hi dsonesuk,

Thank you for the codes, but I'm sorry it's not the one that I meant.

The one from flexbox code, if I run it in W3School "Tryit Editor v3.0" the result is :

A. If under 800px media screen the image is in the first row - the description is in the second row (2 rows).

B. If it's 800px media screen (or more) the image is on the left - the desciption is on the right side (1 row 2 column)

The code (without flexbox) in my first post (after I ran it in "Tryit Editor") do almost the same like the flexbox code.

The different is that at point-A above, I don't know how to center the image within the css only because the result is the image is located on the left.

Later on I found from the internet a code for flexbox, where I saw the result is the image in the center.

So I "steal" the code (not literally stealing because the code is in the code-pen from a tutorial somewhere in the internet).

While your code satisfied me at point-A (under 800px media screen - the image is in the center),

but your code at point-B (more than 800px media screen) is still 2 rows... the description is still under the image.

Anyway, I really appreciate your time and your code for me.

I'm sure that one day I will face other difficulties with my css learning and will ask here in this forum and you are my helper .

regards.

Edited September 2, 2016 by odading

dsonesuk · September 2, 2016

Then like this

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <style>
            body {/*background-color: blue;*/ margin:0; padding: 0;}
            #wrapper {padding:0 15px;}
            #wrapper > * {
                padding: 10px;
                font-weight: bold;
                text-align: center;
            }


            #wrapper main {
                font-size: 0;
                text-align: left;
            }

            #wrapper main > * {
                font-size: 16px;
            }
            section {padding: 10px;}
            header {background: coral;}
            footer {background: lightgreen;}
            #wrapper  main {overflow: hidden; padding: 0;}
            main > aside {
                background: none repeat scroll 0 0 /*violet*/;
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                width: 42%;
                max-width: 600px;

            }
            main > article {
                display: inline-block;
                text-align: justify;
                width: 58%;
                vertical-align: middle;
            }

            .cvm_small,.cvm_large {vertical-align: middle;}
            .cvm_large {width: 100%; max-width: 900px;}
            .cvm_small {display: none;}

            @media only screen and (max-width: 800px){

                body {/*background-color: red;*/}
                main > aside , main > article {
                    display:block;

                    width: auto;
                }

                .cvm_large {display: none;}
                .cvm_small {display: inline-block;}


            }



        </style>
    </head>
    <body>

        <div id="wrapper">
            <header>Header</header>
            <main>
                <aside>
                    <section>
                        <img class="cvm_small" src="http://dummyimage.com/300x200/000/fff" alt="">
                        <img class="cvm_large" src="http://dummyimage.com/600x400/000/fff" alt="">
                    </section>
                </aside>

                <article>
                    <section>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.</p>
                    </section>
                </article>
            </main>
            <footer>Footer</footer>
        </div>

    </body>
</html>

Edited September 2, 2016 by dsonesuk

odading · September 3, 2016

That's exactly what I want.

Thank you very much, dsonesuk. :good:

Sign In

is it possible to center the image in this code ?

Recommended Posts

odading

Link to comment

Share on other sites

odading

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

odading

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

odading

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

odading

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity