Why align-self do not work as text-align in CSS?-CodePudding

I will use extracts and simplify for explanation purposes.

I was looking for errors in a webpage I designed some months ago and I found the following problem in the logo section:

<div>
 <a id="logo" href="index.html" title="Página Principal" class="logo center">
   <img src="img/mainlogo.png" alt="Corporate-logo" title="Página Principal">
 </a>
</div>

Consider that the parent container has: display: flex; and there are another elements (child) inside.

In the stylesheet CSS

.logo {
  flex:1;
  align-self: center;
}

.center {
text-align: center;
}

As soon as I remove the center class the logo goes to left (default value I suppose). I do not understand with alig-self do not place the logo in the center.

What am I missing or not understanding?, I do not want to use the center class to center the logo.

CodePudding user response：

What you need to set is the display property.

display: flex; instead of flex: 1;

(flex: 1 is shorthand for setting flex-grow to 1)

Your alignment can then be defined using the justify-content and align-items properties.

CodePudding user response：

align-self will work as you have it if you add display: flex to the parent. The snippet shows a more common method.

align-self allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

SOURCE

.parent {
  display: flex;
  justify-content: center;
}

<div class="parent">
  <a id="logo" href="index.html" title="Página Principal" class="logo center">
    <img src="img/mainlogo.png" alt="Corporate-logo" title="Página Principal">
  </a>
</div>