Align text vertically to an image

Asked

Viewed 480 times

1

I have two text sections on each side with an image in the middle,and I want to align the text sections vertically with the middle of the image how do I do? Thank you <code>inserir a descrição da imagem aqui</code>

<div class="fourth">
<div class="container">

    <div class="row">
        <div class="col-lg-12 tituloTat">
            <h3><?php echo ($texto[103]); ?></h3>
            <h4><?php echo ($texto[111]); ?></h4>
            <img src="imgs/linhaOndulada.png" class="img-responsive">   
        </div>
    </div>

    <div class="row">

        <div class="col-lg-4 sec4textoEsquerda apresentacao1Sec4">
            <h4><?php echo ($texto[114]); ?></h4>   
        </div>

        <div class="col-lg-4 sec4Imagem apresentacao1Sec4">
            <img src="imgs/<?php echo $img[102]; ?>" class="img-responsive imgFrame" >
        </div>

        <div class="col-lg-4 sec4textoDireita apresentacao1Sec4">
            <h4><?php echo ($texto[115]); ?></h4>   
        </div>

    </div>

</div>


div.fourth { width: 100%;height: auto;background-color: #ffffff;padding-top: 150px;padding-bottom: 150px;position: relative; }


div.fourth div.container div.row div.apresentacao1Sec4 { margin-top:     60px;margin-bottom: 60PX; }

div.fourth div.container div.row div.sec4Imagem img { width: 350px;height: 350px;border-radius: 50%;margin: 0 auto; }
html css

  • See if it works to add this in CSS: div.present1Sec4{ line-height: 350px; }

  • Guy which version of Bootstrap you are using 3 or 4?

  • What is "vertical text with the middle of the image"? Is the text on top of the image? or the text on the image? or side by side but starting and ending in the same lines?

  • Managed to solve?

  • Yes, I managed to. Thank you very much for your help

  • Bootstrap version is 3

  • Be sure to choose the best answer you found by marking on it. Abs!

  • I thought of something like sam how can I do that?........ I’ve found the right thank you sign.

Show 3 more comments

4 answers

0

I noticed that you use bootstrap 3 by class img-responsive, in bootstrap 3 still the grid system had some limitations, until I advise you to take a look at the new version is very good the part of grid and content alignment.

To do what you need in Bootstrap 3 you will need some custom CSS lines to complement.

You have several ways to make the way you want the first.

Let the session where text will be - image - text be flexible if it fits without .col.

The second is with the pre-defined sizes with .col for each item.

Check below the codes redone with Bootstrap v3 which I believe is the one you are using.

.fourth {
display: flex;
align-items: center;
}
.fourth div,
.fourth figure {
-ms-flex: 1 1 auto!important;
flex: 1 1 auto!important;
margin: 0 10px;
}
<!-- Bootstrap assets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<div class="container fourth">
	<div>
		<h4>Título</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a porta tellus. Donec lobortis, nibh non lacinia pellentesque, neque felis finibus justo, ac feugiat augue lectus ut orci. Duis ac volutpat ligula, sed cursus est.</p> 
	</div>

	<figure>
		<img src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX23310792.jpg" class="img-responsive img-circle" >
	</figure>

	<div>
		<h4>Título</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a porta tellus. Donec lobortis, nibh non lacinia pellentesque, neque felis finibus justo, ac feugiat augue lectus ut orci. Duis ac volutpat ligula, sed cursus est.</p>   
	</div>
</div>

The second form is pre-defining the sizes of each area.

.fourth > .d-flex {
display: flex;
align-items: center;
}
.fourth div,
.fourth figure {
-ms-flex: 1 1 auto!important;
flex: 1 1 auto!important;
}
<!-- Bootstrap assets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="container fourth">
	<div class="row d-flex">
		<div class="col-xs-12 col-sm-12 col-md-4">
			<h4>Título</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a porta tellus. Donec lobortis, nibh non lacinia pellentesque, neque felis finibus justo, ac feugiat augue lectus ut orci. Duis ac volutpat ligula, sed cursus est.</p> 
		</div>

		<figure class="col-xs-12 col-sm-12 col-md-4">
			<img src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX23310792.jpg" class="img-responsive img-circle" >
		</figure>

		<div class="col-xs-12 col-sm-12 col-md-4">
			<h4>Título</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a porta tellus. Donec lobortis, nibh non lacinia pellentesque, neque felis finibus justo, ac feugiat augue lectus ut orci. Duis ac volutpat ligula, sed cursus est.</p>   
		</div>
	</div>
</div>

And one more detail, my point of view regardless of the way you choose for your project is to insert in @media that the attributes display: flex; are only displayed in resolutions above 992px, but why? Why in cell phone the attribute display: flex; will try to align them all next to each other by making everyone stay in a row which will be bad for smaller resolutions.

Then CSS would look like this.

@media(min-width: 992px) {
.fourth > .d-flex {
  display: flex;
  align-items: center;
}
.fourth div,
.fourth figure {
  -ms-flex: 1 1 auto!important;
  flex: 1 1 auto!important;
}
}

I hope I’ve been able to help you and help the community!

0

You can use the flex display with align-items https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

.flex {
  display: flex;
  align-items: center;
  flex-direction: row;
}

You add the class in the Row div 

<div class="row flex">

    <div class="col-lg-4 sec4textoEsquerda apresentacao1Sec4">
        <h4><?php echo ($texto[114]); ?></h4>   
    </div>

    <div class="col-lg-4 sec4Imagem apresentacao1Sec4">
        <img src="imgs/<?php echo $img[102]; ?>" class="img-responsive imgFrame" >
    </div>

    <div class="col-lg-4 sec4textoDireita apresentacao1Sec4">
        <h4><?php echo ($texto[115]); ?></h4>   
    </div>

</div>

As it seems that you are using the bootstrap it may be some problem in mobile. In case of any line break problems you can use @media with the flex-wrap property

-1

I wanted a solution with CSS but only managed with jquery $('.sec4textoEsquerda'). css('padding-top',$('.sec4Imagem').height()/2-$('.sec4textoEsquerda').height()/2); Thanks

-1


Place a class in the element you want to align (in case the h4):

<h4 class="meio">

And insert into your CSS:

.meio{
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

The properties top and translateY will cause the widget to be centered vertically inside your container. But it is not directly related to the image. The image is in another div, and as the three divs (text | image | text) have the same height, centering the text inside your container will make it aligned to the middle relative to the image.

Example (run in full screen):

div.fourth { width: 100%;height: auto;background-color: #ffffff;padding-top: 150px;padding-bottom: 150px;position: relative; }


div.fourth div.container div.row div.apresentacao1Sec4 { margin-top:     60px;margin-bottom: 60PX; }

div.fourth div.container div.row div.sec4Imagem img { width: 350px;height: 350px;border-radius: 50%;margin: 0 auto; }

.meio{
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="fourth">
<div class="container">

    <div class="row">
        <div class="col-lg-12 tituloTat">
            <h3>The object isn't rendered immediately. Your img property has a null value at logging time but when you open the object in the console, later, it's filled.</h3>
            <h4>The object isn't rendered immediately. Your img property has a null value at logging time but when you open the object in the console, later, it's filled.</h4>
            <img src="imgs/linhaOndulada.png" class="img-responsive">   
        </div>
    </div>

    <div class="row">

        <div class="col-lg-4 sec4textoEsquerda apresentacao1Sec4">
            <h4 class="meio">1The object isn't rendered immediately. Your img property has a null value at logging time but when you open the object in the console, later, it's filled.</h4>   
        </div>

        <div class="col-lg-4 sec4Imagem apresentacao1Sec4">
            <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" class="img-responsive imgFrame" >
        </div>

        <div class="col-lg-4 sec4textoDireita apresentacao1Sec4">
            <h4 class="meio">2The object isn't rendered immediately. Your img property has a null value at logging time but when you open the object in the console, later, it's filled.</h4>   
        </div>

    </div>

</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.