CSS Re-Centering Elements on Wrap

CSS Re-Centering elements on wrap

This is the best solution I can think of with CSS only, the magic part is the @media queries. Obviously you'll have to do the math to fit your case.

JsFiddle Demo

body {    margin: 0;}.parent-wrapper {    margin: auto;    width: 500px;    padding: 5px 0;    font-size: 0;}.child-wrapper {    display: inline-block;    width: 100px;    font-size: 16px;}.child-wrapper img {    max-width: 100%;    height: auto;    padding: 5px;    vertical-align: top;    box-sizing: border-box;}@media screen and (max-width: 499px) {    .parent-wrapper { width: 400px; }}@media screen and (max-width: 399px) {    .parent-wrapper { width: 300px; }}@media screen and (max-width: 299px) {    .parent-wrapper { width: 200px; }}@media screen and (max-width: 199px) {    .parent-wrapper { width: 100px; }}

<div class="parent-wrapper">    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div></div>

Center div on wrapping (when it doesn't fit on the line)

Pure CSS solution using a flexbox layout:

Updated Example Here

The trick is to add justify-content: center/flex-wrap: wrap to the parent .container element for horizontal centering. Then adjust the first element's margin-right value to auto in order to prevent the last element from being centered when it's on the same line.

(You may need to resize the browser to see how it adjusts).

.container {  width: 100%;  border: 1px solid grey;  padding: 5px;  display: flex;  flex-wrap: wrap;  justify-content: center;}.logo-text {  display: flex;  margin-right: auto;}.block {  padding: 5px;  border: 1px solid orange;}.center-block {  white-space: nowrap;  margin-right: auto;}

<div class="container">  <div class="logo-text">    <div class="block logo">Logo</div>    <div class="block text">This title is short.</div>  </div>  <div class="block right-block">right-btn</div></div><div class="container">  <div class="logo-text">    <div class="block logo">Logo</div>    <div class="block text">This title is slightly longer than the other one. This title is longer than the other one...</div>  </div>  <div class="block right-block">right-btn</div></div>

How can I center a 'ul'?

File style.css

@media screen and (max-width: 500px) {
    .nav-items {
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.sub-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

}

File index.html

<ul class="nav-items">
    <ul class="sub-items">
    <li class="nav-active"><a href="/">Home</a></li>
    <li class="nav-item"><a href="#nav-active">Fruits</a></li>
    </ul>
    <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
</ul>

Allow centered items in flexbox to wrap

Use word-break: break-all since this is just a really long set of inline characters with no actual spaces between the characters.

// \ \ \ \ \ \ \ \ \ TYPE WRITER EFFECT / / / / / / / / / / / / / / / / / / ///function type( i, t, ie, oe ){    input = document.getElementById( ie ).textContent;    document.getElementById( oe ).textContent += input.charAt( i );    setTimeout(       function(){        (          ( i < input.length - 1 ) ? type( i+1, t, ie, oe) : false        );      },       t    );}
type(0, 100, "input", "output");

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */
html,body {  height: 100%;}
body {  display: flex;  flex-wrap: wrap; /* also...this isn't working */  margin: 0;  font-family: sans-serif;}
p {  margin: auto;  text-align: center;  word-break: break-all;}
p:nth-child( 2 ) {  display: none;}

<p id="output"></p>
<!-- \\ \ VERY LONG STRING OF TEXT TO EXTEND PAST SCREEN /////////// // --><p id="input">So I have a long string of text with no spaces. Here I'm using non‑breaking space character entities to simulate that. The problem is I'm using flexbox to center the effected element here, but I don't want all the text to stay on one line like this. There's no spaces, I'm using flexbox, and I want it to wrap. Help?</p>

Centering flex items on wrap with Bootstrap

Center with flexbox only on smaller screen widths...

This way doesn't require using the grid, or adding extra classes to the child divs...

https://www.codeply.com/go/85w4qy1iIB

<container class="my-class 
                  d-flex 
                  align-items-center 
                  justify-content-center
                  justify-content-sm-between
                  flex-sm-row
                  flex-column
                  px-2">
    <div>
        <a class="pr-2">Item 1</a>
        <a class="px-2">Item 2</a>
        <a class="pl-2">Item 3</a>
    </div>
    <div>Right Item</div>
</container>

This works by using the flexbox utils responsively...

• justify-content-center - align horizontal center on xs (implied breakpoint)
• justify-content-sm-between - space between on sm and up
• flex-sm-row - direction row on sm and up
• flex-column - direction column (stacked) on xs

---

Related Topics