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">  A  </h1>
<hr />
<img src="Immagini\images1.png">
I put all into a <legend>
tag, like this:
<legend align="right"><h1 class="red">  A  </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">  A  </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">  A  </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">  A  </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?
/*css part */
h1,hr,img
{
display:inline-block;
vertical-align:middle;
}
/* this will work */
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
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">  A  </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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.