Jump to content
Sign in to follow this  
bartonlewis

flexbox div's won't center in their container

Recommended Posts

I found code for a scrolling looping slideshow that I like but I can't get the div's to center.  The div's seem to be left aligned with more space on the right side of the screen than left; this is evident on my 1366px monitor but much more obvious on a 1920px monitor where there is a lot of blank space on the right side of the screen.  I have assigned display:flex to the parent and nested containers and center to align-items and justify-content, but the 2 main div's ("slider" and "wrapper_slider_text") are not centering.  If anyone can help, I'd be very grateful.  Thanks.

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    width: 100%;
    margin: 0 auto 0;
    }
.flex-container-slider {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 0px;
    justify-content: center;
    align-items: center;
    }
.slider {
    width: 768px;
    height: 432x;
    overflow: hidden;
}
#slider_images {
    width : 9984px;
    height: 432px;
    overflow: hidden;
    /* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */
    animation: slide 36s infinite;
    -moz-animation: slide 36s infinite;
    -webkit-animation: slide 36s infinite;
    -o-animation: slide 36s infinite;
}
#slider_images img {
    float: left;
}
.container_blank_space_small p {
    text-indent: -9999px;
    height: 26px;
}

    @keyframes slide{
    0%{margin-left: 0px;}
    4.7%{margin-left: 0px;}
    7.7%{margin-left: -768px;}
    12.4%{margin-left: -768px;}
    15.4%{margin-left: -1536px;}
    20.1%{margin-left: -1536px;}
    23.1%{margin-left: -2304px;}
    27.8%{margin-left: -2304px;}
    30.8%{margin-left: -3072px;}
    35.5%{margin-left: -3072px;}
    38.5%{margin-left: -3840px;}
    43.2%{margin-left: -3840px;}
    46.2%{margin-left: -4608px;}
    50.9%{margin-left: -4608px;}
    53.9%{margin-left: -5376px;}
    58.6%{margin-left: -5376px;}
    61.6%{margin-left: -6144px;}
    66.3%{margin-left: -6144px;}
    69.3%{margin-left: -6912px;}
    74%{margin-left: -6912px;}
    77%{margin-left: -7680px;}
    81.7%{margin-left: -7680px;}
    84.7%{margin-left: -8448px;}
    89.4%{margin-left: -8448px;}
    92.4%{margin-left: -9216px;}
    97.1%{margin-left: -9216px;}
    100%{margin-left: 0px;}
}
    @-moz-keyframes slide{
    0%{margin-left: 0px;}
    4.7%{margin-left: 0px;}
    7.7%{margin-left: -768px;}
    12.4%{margin-left: -768px;}
    15.4%{margin-left: -1536px;}
    20.1%{margin-left: -1536px;}
    23.1%{margin-left: -2304px;}
    27.8%{margin-left: -2304px;}
    30.8%{margin-left: -3072px;}
    35.5%{margin-left: -3072px;}
    38.5%{margin-left: -3840px;}
    43.2%{margin-left: -3840px;}
    46.2%{margin-left: -4608px;}
    50.9%{margin-left: -4608px;}
    53.9%{margin-left: -5376px;}
    58.6%{margin-left: -5376px;}
    61.6%{margin-left: -6144px;}
    66.3%{margin-left: -6144px;}
    69.3%{margin-left: -6912px;}
    74%{margin-left: -6912px;}
    77%{margin-left: -7680px;}
    81.7%{margin-left: -7680px;}
    84.7%{margin-left: -8448px;}
    89.4%{margin-left: -8448px;}
    92.4%{margin-left: -9216px;}
    97.1%{margin-left: -9216px;}
    100%{margin-left: 0px;}
}
@-webkit-keyframes slide{
    0%{margin-left: 0px;}
    4.7%{margin-left: 0px;}
    7.7%{margin-left: -768px;}
    12.4%{margin-left: -768px;}
    15.4%{margin-left: -1536px;}
    20.1%{margin-left: -1536px;}
    23.1%{margin-left: -2304px;}
    27.8%{margin-left: -2304px;}
    30.8%{margin-left: -3072px;}
    35.5%{margin-left: -3072px;}
    38.5%{margin-left: -3840px;}
    43.2%{margin-left: -3840px;}
    46.2%{margin-left: -4608px;}
    50.9%{margin-left: -4608px;}
    53.9%{margin-left: -5376px;}
    58.6%{margin-left: -5376px;}
    61.6%{margin-left: -6144px;}
    66.3%{margin-left: -6144px;}
    69.3%{margin-left: -6912px;}
    74%{margin-left: -6912px;}
    77%{margin-left: -7680px;}
    81.7%{margin-left: -7680px;}
    84.7%{margin-left: -8448px;}
    89.4%{margin-left: -8448px;}
    92.4%{margin-left: -9216px;}
    97.1%{margin-left: -9216px;}
    100%{margin-left: 0px;}
}
 @-o-keyframes slide{
    0%{margin-left: 0px;}
    4.7%{margin-left: 0px;}
    7.7%{margin-left: -768px;}
    12.4%{margin-left: -768px;}
    15.4%{margin-left: -1536px;}
    20.1%{margin-left: -1536px;}
    23.1%{margin-left: -2304px;}
    27.8%{margin-left: -2304px;}
    30.8%{margin-left: -3072px;}
    35.5%{margin-left: -3072px;}
    38.5%{margin-left: -3840px;}
    43.2%{margin-left: -3840px;}
    46.2%{margin-left: -4608px;}
    50.9%{margin-left: -4608px;}
    53.9%{margin-left: -5376px;}
    58.6%{margin-left: -5376px;}
    61.6%{margin-left: -6144px;}
    66.3%{margin-left: -6144px;}
    69.3%{margin-left: -6912px;}
    74%{margin-left: -6912px;}
    77%{margin-left: -7680px;}
    81.7%{margin-left: -7680px;}
    84.7%{margin-left: -8448px;}
    89.4%{margin-left: -8448px;}
    92.4%{margin-left: -9216px;}
    97.1%{margin-left: -9216px;}
    100%{margin-left: 0px;}
    }
.wrapper_slider_text {
    display: flex;
    width: 35%;
    overflow: hidden;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    }
.slider_text {
    font-family: "europa",sans-serif;
    font-size: 125%;
    color: black;
    font-weight: 500;
    line-height: 125%;
    padding: 75px;
    letter-spacing: .8px;
    font-weight: 600;
     }
</style>
</head>
<body>
<header>
</header>  

<section class="flex-container-slider">
    <div class="slider">
     <!-- Each image is 768px by 432px -->
    <div id="slider_images">
        <img src="http://bartonlewisfilm.com/img_768_water.jpg" alt="water" />
        <img src="http://bartonlewisfilm.com/img_768_blue.jpg" alt="blue" />
        <img src="http://bartonlewisfilm.com/img_768_robins_egg.jpg" alt="robins egg" />
        <img src="http://bartonlewisfilm.com/img_768_23rd_st.jpg" alt="23rd st" />
        <img src="http://bartonlewisfilm.com/img_768_broken_guru.jpg" alt="broken guru" />
        <img src="http://bartonlewisfilm.com/img_768_i_will_miss_you.jpg" alt="i will miss you" />
        <img src="http://bartonlewisfilm.com/img_768_pants.jpg" alt="pants" />
        <img src="http://bartonlewisfilm.com/img_768_nose.jpg" alt="nose" />
        <img src="http://bartonlewisfilm.com/img_768_swirls.jpg" alt="swirls" />
        <img src="http://bartonlewisfilm.com/img_768_church_ave.jpg" alt="church ave" />
        <img src="http://bartonlewisfilm.com/img_768_network_reality_stars.jpg" alt="network reality all stars" />
        <img src="http://bartonlewisfilm.com/img_768_ports.jpg" alt="ports" />
        <img src="http://bartonlewisfilm.com/img_768_kline.jpg" alt="kline" />
    </div>
    </div>
    <div class="wrapper_slider_text">
        <div class="slider_text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus diam odio, non dignissim lectus auctor vitae. Sed facilisis malesuada velit nec vehicula. Vivamus eleifend scelerisque faucibus. </p>
        <div class="container_blank_space_small">
        <p>text</p>
        </div>
            <p>Mauris porttitor faucibus lorem, ut tincidunt justo dignissim eget. Nulla congue orci sit amet sem commodo, et volutpat lorem cursus. </p>
        </div>
    </div>
</section>
</body>
</html>

 

Share this post


Link to post
Share on other sites

My screen is 1920 pixels wide. I put your code in a file and tested it in my browser and didn't notice any issue.

Share this post


Link to post
Share on other sites

okay thanks, I'll recheck on my 1920 monitor at work Monday to confirm.  It does look okay now on my 1366 monitor.  Maybe when I stripped out the rest of the code from my webapge to upload here something was affected.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×