How can I align three elements in a legend tag in the same line?

Question

I have three elements: a letter in a <h1> tag, a <hr /> tag and an image.
This is how they are in html:

<h1 class="red">&nbsp A &nbsp</h1>
<hr />
<img src="Immagini\images1.png">

I put all into a <legend> tag, like this:

<legend align="right"><h1 class="red">&nbsp A &nbsp</h1><hr /><img src="Immagini\images1.png"></legend>

but the elements are not aligned in the same line, they are one over the other.
How can I align all the elements in the same line?
This is the complete html:

<fieldset class="accordion"><legend align="right"><h1 class="red">&nbsp A &nbsp</h1><hr /><img src="Immagini\images1.png"></legend></fieldset>

The class="red" is only to give the red color.
The class="accordion" only contains this:

.accordion {
cursor: pointer;
transition: 0.4s;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
padding: 0%;
border-top-style: outset;
}

Definitely, I want something like this:

<hr width="45%" style="float: left" /><h1 class="red" style="float: left">&nbsp A &nbsp</h1><hr width="15%" style="float: left" /><img src="Immagini\images1.png" style="float: left">

but all aligned on the same line and using the <fieldset> border instead of the <hr /> left tag. An example of the fieldset I use can be found here: Animated Series.

Solved with this:

.rightalign {
display:inline-block;
vertical-align:middle;
}
.accordion {
cursor: pointer;
transition: 0.4s;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
padding: 0%;
border-top-style: outset;
}

<fieldset class="accordion"><legend style="width: 52%" align="right"><h1 class="rightalign" style="color: red">&nbsp A &nbsp</h1><hr width="45%" class="rightalign" color="#e3e3e3" /><img src="Immagini\images1.png" class="rightalign">
</legend></fieldset>

But now, when I change the size of the window, all returns not aligned. How can I solve this?

Welcome to StackOverflow, that's a great question with lots of good code examples :) — Bill, Aug 29 '18 at 10:09
I sure can. You've marked an answer below as correct - did it not answer the question for you? If not you can click the green tick again to unmark it. — Bill, Sep 03 '18 at 08:34
It answered my first question, but i edited it because the method worked but there is another problem. — SpadaSpettro, Sep 16 '18 at 18:49

score 1 · Accepted Answer · answered Aug 28 '18 at 06:01

1

        /*css part */
          h1,hr,img
             {
                display:inline-block;
                vertical-align:middle;
              }
             /* this will work */

answered Aug 28 '18 at 06:01

Anil kumar H J

194
8

Please explain your solution. – Tsunamis Aug 28 '18 at 06:35

score 0 · Answer 2 · answered Aug 28 '18 at 04:31

0

You can use display:inline (this prevents width and height) and display:inline-block in style attribute for same line. However you can easily use display:flex on the parent of these elements

answered Aug 28 '18 at 04:31

Fuad Pashayev

75
1
8

score 0 · Answer 3 · answered Aug 28 '18 at 04:57

You can use display:inline-block for both legend and inner element. Here is the code sample-

.accordion {
    cursor: pointer;
    transition: 0.4s;
    border-left-style: none;
    border-bottom-style: none;
    border-right-style: none;
    padding: 0%;
    border-top-style: outset;
}
.legend {
    display: inline-block;
    vertical-align: middle;
    width:100%;
}

<fieldset class="accordion">
  <legend class="legend">
    <hr style="display:inline-block" width="45%"/><h1 class="red" style="display:inline-block">&nbsp A &nbsp</h1><hr width="15%" style="display:inline-block"/><img style="display:inline-block" src="Immagini\images1.png">
  </legend>
</fieldset>

You can also use display:flex but the problem is with the fieldset and legend tags. fieldset and legend tag not work with flexbox. You can see this answer for more details.

How can I align three elements in a legend tag in the same line?

3 Answers3