0

I have a picture and text, and I want to align both of them to center (both horizontally and vertically).

body,
html {
  background-color: #181A1B;
  color: white;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.introduction {
  float: left;
}

.clearfix {
  clear: both;
}

#profile-picture {
  border-radius: 100%;
  float: inherit;
}

#introduction-paragraph {
  float: inherit;
  margin-left: 10px;
  margin-top: 40px;
}
<div class="container">
  <div class="introduction">
    <img id="profile-picture" src="https://icon-library.net/images/profile-png-icon/profile-png-icon-15.jpg" alt="profile picture">
    <p id="introduction-paragraph">Test</p>
  </div>
  <div class="clearfix"></div>
</div>

Now if I look through the Inspector, I can see that in Firefox:

firefox inspector

The value of float attribute is set to left, as it should be, since it's inheriting from .introductoin. But in Chrome:

chrome inspector

The value of float attribute is set to none, even though it understands that it's being inherited. As the result the two elements of .introductoin are not aligned horizontally in Chrome, but they are in Firefox. How can I fix this?

Version of each browser: firefox 69.0-1 & google-chrome 77.0.3865.75-1.

versions

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Amir Shabani
  • 3,857
  • 6
  • 30
  • 67
  • 1
    I made you a snippet. – mplungjan Sep 15 '19 at 13:40
  • @mplungjan Thank you! it demonstrates the problem I have perfectly. – Amir Shabani Sep 15 '19 at 13:42
  • 1
    IMO Chrome is doing right here, because float on flex items has no effect – Temani Afif Sep 15 '19 at 13:42
  • 1
    *The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element.* --> the computed value of float for a flex item is none, you can check this in the dev tools – Temani Afif Sep 15 '19 at 13:45
  • 1
    ^ this said, to fix the issue continue using flex like you did on the upper container. Don't mix float with flex – Temani Afif Sep 15 '19 at 13:46
  • @TemaniAfif Thank you for you comments, I think I understand. I did notice that `float: left` had no effect on `flex` in Chrome, as you said. How can I **align elements of a div horizontally, in `display: flex`?** – Amir Shabani Sep 15 '19 at 13:51
  • 1
    you already did it for the container, use the same inside it – Temani Afif Sep 15 '19 at 13:53

0 Answers0