Align
to right in IE/Edge

Question

Trying to align a handful of <hr> elements to the right on this page. In IE/Edge, the <hr> elements align left in every case.

I am using <hr class="hr-right">

.hr-right {
  text-align: right;
  margin-right: 0;
}

I have tried to use floats and clears, but I end up with the <hr> being displayed like a float image inside the paragraph.

Michael Benjamin · Accepted Answer · 2017-08-30T15:42:09.447

5

If you want elements to align-right in a flex container use:

margin-left: auto

not

margin-right: 0;

Flex auto margins work by consuming all available free space.

So margin-left: auto will consume all space to the left of the item, pinning it to the right edge.

More details here:

edited Aug 30 '17 at 15:42

answered Aug 30 '17 at 15:27

Michael Benjamin

Thank you, while this technically breaks it in chrome for me, all I needed to change it to for both browsers was margin-left: auto; margin-right: 0; – Kerrigan D Aug 30 '17 at 15:32
My answer is based on the code posted in your question. Consider posting a working example for a more in-depth review. – Michael Benjamin Aug 30 '17 at 15:39

1 Answers1