如何将这一行与 flexbox 对齐？

Question

Im trying to get an image to be in the same row as my text in my ABOUT section.

I've tried to wrap my <div class="portrait"> and <p> into a <div class="wrapper"> with css flex-direction:row

Heres a pen: https://codepen.io/anon/pen/MqRdjb

I think some CSS is being overwritten, or I'm not using my CSS properly.

Thanks for any and all help!!

Answer 1

flex-direction: row has no effect without including display: flex .

Adjust the wrapper css to:

.wrapper {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

You can also refactor the margins for the elements inside the wrapper if you want to center them. Any vertical margins can be removed and applied to the wrapper itself.

.portrait{
  width:100px;
  height:150px;
  margin-left: auto;
  margin-right: 10px; /* Align your image right */
  z-index: 1;
  border-radius: 10%;
  background-color:#555;
}

.ABOUT p{
  font-size:1.2em;
  text-align: center;
  margin-right: auto; /* align text left */
}