Css: Center Block, But Align Contents to the Left

CSS: Center block, but align contents to the left

Reposting the working answer from the other question: How to horizontally center a floating element of a variable width?

Assuming the element which is floated and will be centered is a div with an id="content" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Here is a good reference regarding that http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats

How to get text align center with block but align left?

Just wrap your content the image and content para's inside div with text-align: left.

Try this:

Check Demo here

HTML:

<div class="wrapper">
  <div class="main">
    IMAGE
  </div>
  <div class="content">
    <div class="text-left">
      <p>
        Image
      </p>
      <p>
        Content
      </p>
    </div>

  </div>
</div>

CSS:

.wrapper {
  max-width:300px;
}
.text-left {
  text-align: left;
}
.main {
  width:300px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:column nowrap;
  background:#458bc3;
  color:#fff;
  height:300px;
  overflow:hidden;
}
.content {
  color:#fff;
  background:#a6d8ff;
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:column nowrap;
}
.content p {
  margin:0px;
}

Center my text, but keep left align?

Like this? I also cleaned up your html a bit. You can play around with the width on the ul.container, this will move the 'list' to the left or right.

img {  padding-bottom: 30px;  display: block;  margin: auto;  width: 10%;}
a {  line-height: 1.7em;  display: block;  margin-left: auto;  color: black;  text-decoration: none;}
ul.container {  text-align: left;  margin-left: auto;  margin-right: auto;  width: 60%;  list-style-type: none;  padding: 0;}
main {  background-image: url("https://presentations.inxpo.com/SharedContent/VX/images/background- shell.jpg");
}

<!DOCTYPE html><html>
<head>  <Title> Conspiracy Theories </Title>  <link href="mystyle.css" type="text/css" rel="stylesheet"></head>

<main>  <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />
  <ul class="container">    <li><a href="WP1.html" type="text/html"> EmDrive is being tested on the X-37B</a></li>    <li><a href="WP2.html" type="text/html"> Diesel Submarines</a></li>    <li><a href="WP3.html" type="text/html"> Lethal B-21 vs. B-2 Stealth Bomber</a></li>    <li><a href="WP4.html" type="text/html"> Air Force Wants a New Fighter</a></li>    <li><a href="WP5.html" type="text/html"> King Tiger Tank : Super Weapon or Super Myth?</a></li>    <li><a href="WP6.html" type="text/html"> Ground Combat Vehicle (GCV)</a></li>    <li><a href="WP7.html" type="text/html"> 3 service men killed</a></li>    <li><a href="WP8.html" type="text/html"> US intercepts 2 Russian bombers</a></li>    <li><a href="WP9.html" type="text/html"> World reacts to US strikes</a></li>
  </ul>
</main><h1> </h1>

CSS: How to center align a list element with left aligned text?

Make the ul an inline-block element and center that. Then left align the text of the li.

.container {  width: 600px;  padding: 2em;  background: #eee;  text-align: center;}
ul {  display: inline-block;  text-align: left;}
.align-center {  text-align: center;}

<div class="container">  <p class="align-center">Center Align Test</p>
  <ul>    <li>First element</li>    <li>Second element</li>    <li>Finally, the third and final element</li>  </ul>
</div>

Center ul but keep left-aligned

Sample Image

If you are looking for this solution, you need to add padding-left:0

ul {
  /* text-align: center, applied to parent jumbotron class, only works on inline elements; applying this ensures ul is centered */
  display: inline-block;
  text-align: left;
  /* Bottom set to 4em to match margin above ul created by blockquote */
  margin-bottom: 4em;
  list-style: none;
  margin-left:0;
  padding-left:0;
}

Centering text in html while keeping it left justified?

I managed to get this to work by "shrink-wrapping" the title div to the text that is inside, so that the text was centered within it, and then use the home div as a flex box within which the title div was centered.

.home {
    padding: 5% 0;
    margin-top: 10%;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.title {
    width: max-content;
}

Hope this helps anyone else having this problem!

Displaying flexbox centered but align items left like text align left

If you are open to include another wrapper in your markup, it is easy:

Use align-items: flex-start (or let it take the default stretch value) for the #donateList
Center align vertically and horizontally the new wrapper div.

See demo below (also removed some redundant styles):

main { /* ADDED */  display: flex;  align-items: center;  justify-content: center;}#donateList {  display: flex;  justify-content: center;  align-items: flex-start; /* CHANGED */  /*align-self: center;*/  flex-direction: column;  flex-wrap: wrap;}
.donateItem {  flex: 0 1 auto;  /*align-items: flex-start;  justify-content: flex-start;  align-self: center;*/}
.donateItem * {  display: inline-block;}
.donateItem p {  vertical-align: bottom;}
.donateItem img{  height: 64px;  width: 64px;}

<main>  <div id="donateList">    <div class="donateItem">      <img src="http://placehold.it/100x100">      <p>Bitcoin:</p>      <p>fkewjhf;eiwhf;iewfhwehfewifhew</p>    </div>    <div class="donateItem">      <img src="http://placehold.it/100x100">      <p>Paypal:</p>      <p>eijfhewfwifhefefewf</p>    </div>  </div></main>

How do you left-align blocks in a container that's centered and shrinks to fit?

Here's one [imperfect] solution. You can add invisible placeholders to the end of your inline blocks. That will left-align the last row.

http://jsfiddle.net/aakt65x4/

However, if you don't fill up the first row, the entire thing will appear left-aligned.

HTML:

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

CSS:

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}

Center align buttons but left align the text inside

two changes I have made and that's
change .shell property text-align:centre to left
and .social-connect-button span property margin-left: .875em; to margin-left: 25%;
Hope you got your answer as centred left aligned text...:)

.shell {  text-align: left;}.social-connect-button {  display: inline-block;  text-decoration: none;  line-height: 2.65em;  display: block;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -ms-border-radius: 5px;  -o-border-radius: 5px;  border-radius: 5px;  font-size: 18px;  color: #fff!important;}.fb-login {  background-color: #3b589e;  margin-bottom: .7em;}.google-login {  background-color: #dd4c39;  cursor: pointer;}.fb-login i {  float: left;  background: #37528C;  padding: 0 .4em;  border-radius: 5px 0 0 5px;}.google-login i {  float: left;  background: #37528C;  padding: 0 .4em;  border-radius: 5px 0 0 5px;}.social-connect-button span {  margin-left: 25%;  /*margin-left: .875em;*/  margin-right: .875em;}

<div class="shell">
  <a class="social-connect-button fb-login" href="[facebook-login-url]">    <i>ICON</i>    <span>Login with Facebook</span>  </a>
  <a class="social-connect-button google-login" href="[google-login-url]">    <i>ICON</i>    <span>Login with Google</span>  </a>
</div>

Css: Center Block, But Align Contents to the Left