Align text vertically in relation to an image

Question

Align text vertically in relation to an image

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (-1 votes)
#4 by (-1 votes)

1

I have two sections of text 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 can I do it?

<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

asked by anonymous 27.07.2018 / 19:23

4 answers

0

You can use the flex display with align-items link

.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 might be that of some problem on the mobile. If it has any problems with the line break you can use @media with the flex-wrap: wrap

30.07.2018 / 13:59

0

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

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

You have several ways to do it the way you want it first.

That the session where text will be - image - text will be flexible if it adjusts without .col .

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

Check out the redrawd 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 way is to pre-define 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 is that whatever you choose for your project is to insert in @media that display: flex; attributes are only displayed in resolutions above 992px , but why? Because in the mobile the display: flex; attribute will try to align all of them side by side by making them all stand on one line which will be bad for minor resolutions.

So it would look like CSS.

@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 have been able to help you and help the community!

11.08.2018 / 02:51

-1

I wanted a solution with CSS but only with jquery $ ('. sec4 text left'). css ('padding-top', $ ('. sec4Image')) height () / 2 - $ ('. sec4text Left). Thanks

27.07.2018 / 19:58

Dictionary does not return all possible words How to find out if the list is full?

score -1 · Accepted Answer

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

<h4 class="meio">

And insert into your CSS:

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

The top and translateY properties will cause the element to be centered vertically within its container. But it is not directly related to the image. The image is in another div , and since the three div s (text | image | text) have the same height, centralizing the text inside your container will cause it to align in half with the image. p>

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><linkrel="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><divclass="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>