How to have a picture by a header text - html

Question

I have some text and I want to display a small picture to the left of it, and then on the right side of the text, but I'm not to sure how to do this and make it responsive, so that it all shrinks together when the screen gets smaller.
I'm using bootstrap 3, so far I have:
HTML:
#restaurant-menu img {
width: 100px;
display:inline-block;
vertical-align:top;
}
.border {
display: block;
height: 2px;
margin-top: 30px;
margin-bottom: 30px;
width: 78px;
background: #F8BD23;
margin: 0 auto;
}
h1 {
font-weight: 200;
font-size: 65px;
letter-spacing: 0px;
line-height: 50px;
color: black;
padding-top: 20px;
margin-bottom: 3px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="left">
<img class="img-responsive" src="img/g.png" style="margin: auto;">
</div>
<div class="mid">
<h1>Priserna</h1>
<span class="border"></span>
<p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
</div>
<div class="right">
<img class="img-responsive" src="img/g.png" style="margin: auto;">
</div>
Any help on making 2 images appear on the left side of the text and the right side would be great ,
thanks

Answer 1

Wrap your divs in a container (here flex-container) and give it the attribute of display:flex as shown :
.flex-container {
display: flex; /*Generates a flexbox layout with default flex direction as row */
width: 100%; /* Not really required */
align-items: center; /*Aligns contents vertically */
justify-content: center; /*Aligns contents horizontally */
text-align: center; /*Aligns further text in the center */
}
#restaurant-menu img {
width: 100px;
display: inline-block;
vertical-align: top;
}
.border {
display: block;
height: 2px;
margin-top: 30px;
margin-bottom: 30px;
width: 78px;
background: #F8BD23;
margin: 0 auto;
}
h1 {
font-weight: 200;
font-size: 65px;
letter-spacing: 0px;
line-height: 50px;
color: black;
padding-top: 20px;
margin-bottom: 3px;
text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="flex-container">
<div class="left">
<img class="img-responsive" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="margin: auto;">
</div>
<div class="mid">
<h1>Priserna</h1>
<span class="border"></span>
<p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
</div>
<div class="right">
<img class="img-responsive" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="margin: auto;">
</div>
</div>

Answer 2

Using percentages as a width will do the trick, and make it responsive
.left,.mid,.right{
float:left;
}
.left,.right{
width:25%;
}
.left img,.right img{
width:100%;
}
.mid{
width:50%;
}
#restaurant-menu img {
width: 100px;
display:inline-block;
vertical-align:top;
}
.border {
display: block;
height: 2px;
margin-top: 30px;
margin-bottom: 30px;
width: 78px;
background: #F8BD23;
margin: 0 auto;
}
h1 {
font-weight: 200;
font-size: 65px;
letter-spacing: 0px;
line-height: 50px;
color: black;
padding-top: 20px;
margin-bottom: 3px;
text-align: center;
}
<div class="left">
<img class="img-responsive" src="https://vignette.wikia.nocookie.net/geosworld/images/0/09/Toon_link.jpg/revision/latest?cb=20131223183834" style="margin: auto;">
</div>
<div class="mid">
<h1>Priserna</h1>
<span class="border"></span>
<p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
</div>
<div class="right">
<img class="img-responsive" src="https://vignette.wikia.nocookie.net/geosworld/images/0/09/Toon_link.jpg/revision/latest?cb=20131223183834" style="margin: auto;">
</div>

Answer 3

You can try flex like this :
.content {
display: flex;
align-items: center;
justify-content: center;
}
#restaurant-menu img {
width: 100px;
display: inline-block;
vertical-align: top;
}
.border {
display: block;
height: 2px;
margin-top: 30px;
margin-bottom: 30px;
width: 78px;
background: #F8BD23;
margin: 0 auto;
}
h1 {
font-weight: 200;
font-size: 65px;
letter-spacing: 0px;
line-height: 50px;
color: black;
padding-top: 10px;
margin-bottom: 3px;
text-align: center;
}
<div class="content">
<div class="left">
<img class="img-responsive" src="https://lorempixel.com/100/100/" style="margin: auto;">
</div>
<div class="mid">
<h1>Priserna</h1>
<span class="border"></span>
<p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
</div>
<div class="right">
<img class="img-responsive" src="https://lorempixel.com/100/100/" style="margin: auto;">
</div>
</div>
Or a simple inline-block solution :
.content {
text-align: center;
}
.left,
.mid,
.right {
display: inline-block;
vertical-align: top;
}
#restaurant-menu img {
width: 100px;
display: inline-block;
vertical-align: top;
}
.border {
display: block;
height: 2px;
margin-top: 30px;
margin-bottom: 30px;
width: 78px;
background: #F8BD23;
margin: 0 auto;
}
h1 {
font-weight: 200;
font-size: 65px;
letter-spacing: 0px;
line-height: 50px;
color: black;
margin-bottom: 3px;
text-align: center;
}
<div class="content">
<div class="left">
<img class="img-responsive" src="https://lorempixel.com/100/100/" style="margin: auto;">
</div>
<div class="mid">
<h1>Priserna</h1>
<span class="border"></span>
<p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
</div>
<div class="right">
<img class="img-responsive" src="https://lorempixel.com/100/100/" style="margin: auto;">
</div>
</div>

Answer 4

try adding this classes. You can also try to change the width as you wish and make use of media queries to handle the breakpoints to make it responsive.
.left{
width: 10%;
display: inline-block;
}
.mid{
display:inline-block;
}
.right{
width: 10%;
display : inline-block;
}
You can also try this instead
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="left">
<img class="img-responsive" src="https://www.w3schools.com/w3css/img_fjords.jpg" style="margin: auto;">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="mid">
<h1>Priserna</h1>
<span class="border"></span>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="left">
<img class="img-responsive" src="https://www.w3schools.com/w3css/img_fjords.jpg" style="margin: auto;">
</div>
</div>
</div>
<p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
If this isn't the result you wanted, then can you give some more details or reference to what you actually want to achieve