What is the best way to vertically center my text on the right and left sides of an image?

I am struggling to align the text on the left and right side of my image to the vertical center. It seems like my containers are not recognizing their height. How can I resolve this issue?

Here are the CSS and HTML snippets for your reference:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
  display: table;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<footer class="footer">
  <div class="container" style="display: table-cell; vertical-align: bottom">
    <div class="row">
      <div class="col-md-4 vert">
        <p>
          Text 1
        </p>
      </div>
      <div class="col-md-4 text-center">
        <img src="https://www.w3schools.com/images/w3schools_green.jpg" style="height: 60px" />
      </div>
      <div class="col-md-4 text-right">
        Text 2
      </div>
    </div>
  </div>
</footer>
csshtml

Answer №1

If you want to adjust the line-height of your footer to match its height of 60px, you can do so by adding line-height:60px in your CSS like this:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
  display: table;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  
}

.vert {
  line-height:60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<footer class="footer">
  <div class="container" style="display: table-cell; vertical-align: bottom">
    <div class="row">
      <div class="col-md-4 vert">
        <p>
          Text 1
        </p>
      </div>
      <div class="col-md-4 text-center">
        <img src="https://www.w3schools.com/images/w3schools_green.jpg" style="height: 60px" />
      </div>
      <div class="col-md-4 text-right vert">
        Text 2
      </div>
    </div>
  </div>
</footer>

Answer №2

To vertically center content in your .row, include align-items: center; and adjust the placement of the p tag within the .col-md-4 elements.

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Specify the footer height */
  background-color: #f5f5f5;
  display: table;
}

.row {
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<footer class="footer">
  <div class="container" style="display: table-cell; vertical-align: bottom">
    <div class="row">
      <div class="col-md-4 vert">
        <p>
          Text 1
        </p>
      </div>
      <div class="col-md-4 text-center">
        <img src="https://www.w3schools.com/images/w3schools_green.jpg" style="height: 60px" />
      </div>
      <div class="col-md-4 text-right">
        Text 2
      </div>
    </div>
  </div>
</footer>

Answer №3

To vertically center your content, simply apply the following CSS:

align-items: center;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for attaching functions to a fresh SVG element with jQuery?

My jQuery code creates an <svg> element and appends it to a <div>. When I try to access the appended <svg> using each() after the append() function, the event handler doesn't work. However, if I create the <svg> element before ...

javascriptjqueryhtmlsvg

What is the best way to change the class of the inline table of contents element using JavaScript?

INQUIRY Hello, I am currently working on building a straightforward navigation site and I have a question regarding how to modify or add a class to one of the li elements within the inline table of contents (toc) on the right side. I want to style it usin ...

javascripthtmlcss

Replace text using the str_replace function

I have a total of seven lines of text that I need to manipulate using PHP. My first task is to filter out any lines that do not contain the word 'MARCO1998'. Next, from the remaining lines, I need to extract only the 1-3 numbers that come after ...

phphtml

Conceal Tooltips with Materialize CSS

I'm trying to figure out how to hide the tooltip that appears when hovering over this element using Materialize CSS. <li><a class="btn-floating green" onclick="window.print();return false;"><i class="material-icons tooltipped" data-pos ...

javascriptjqueryhtmlcssmaterialize

Utilizing JQuery to extract the image title and render it as HTML code

I am currently facing an issue with displaying an image in my project. I want to hide the image using CSS (display: none) and instead, retrieve the value of its title attribute and display it within the parent div by utilizing JQuery. Despite knowing tha ...

javascriptjqueryhtml

Troubles with border-image in CSS

I am currently experimenting with CSS's border-image property to create a custom border for a div element. Despite having what I believe to be the correct code, my image is not displaying as the border. Can someone please review this HTML/CSS code and ...

htmlcss

HTML - Customizing container with background color and ensuring minimum height of 100%

After creating a dynamic page using Bootstrap, I managed to add a sticky nav bar and footer. The navbar, footer, and page content are all in black color. I want the main content area to be white with black sides matching the background. Currently, I ca ...

htmlcsstwitter-bootstrapresponsive-designsticky-footer

Adjust the visibility of a different element when it is set to display none using jQuery

I am looking to modify the visibility property of a different element when a specific element has its display set to none. if ($("#first-layer").css('display') === 'none') { $("#second-layer").removeAttr("visibility"); } #second-la ...

jqueryhtmlcsshiddendisplay

WP Highlighted Image

I'm facing a small issue where the featured image on my posts is not displaying in the desired size. I want the featured image to match the total width of the post, but it keeps showing up in its original size. I'm clueless about how to fix this ...

phphtmlcsswordpress

Synchronize information between two drop-down lists

I am currently utilizing the boostrap library to create a pair of dropdown lists. My goal is to have the items in the second dropdown list dynamically update based on the selection made in the first dropdown. Within my code, there exists a dictionary name ...

javascripthtmlbootstrap-5

The div's height is failing to adjust based on the content it contains

My div with the class .list-holder in the header is not adjusting its size based on the content within the div. When I increase the padding of the list items, the content overflows outside the div. I have included the Bootstrap CDN. .list-holder { ...

htmlcssbootstrap-4

Is there a way to conceal my button menu when printing?

I'm trying to create a button that prints out the current page, but I want to hide my menu of buttons (which is contained inside 'mainMenuDiv') when I go to print. However, so far, all my attempts have resulted in an error saying 'uncau ...

javascripthtmlreactjsprintinghide

Is there a way to modify my code to eliminate the need for a script for each individual record?

Whenever I need to create a code with the ID by browsing through my records, is there a way to make just one function for all the records? $tbody .= '<script> $(document).ready(function(){ $("#img'.$idImage .'").click(functi ...

javascriptphphtml

Instructions for creating a background within a container and positioning text in the center of the image utilizing HTML and CSS

I am currently learning HTML, CSS, and JavaScript. I am in the process of building my very first website, but I have encountered a problem. I am struggling to change the background color within the container beneath the images to a specific color (#82b5cf) ...

htmlcsssass

What's the best way to utilize Bootstrap 4 flexbox to ensure that a sidebar column menu smoothly transitions into a top column menu when viewed on a mobile device?

I would like the menu to always be displayed as a column, regardless of the screen size. Currently, it switches to a horizontal top layout and then wraps to two rows before becoming a column on smaller screens. I want it to stay as a column at all times an ...

htmlcsstwitter-bootstrapflexbox

Difficulty executing for loop due to multiple buttons, resulting in malfunctioning buttons in JavaScript code

Currently encountering an issue while trying to implement modal windows on my first website. Everything works fine without the for loop, but I wanted to have multiple buttons and windows, so I decided to use a for loop to handle each button. Strangely, the ...

javascripthtml

jQuery UI Datepicker Display Issue

I'm encountering an issue with a jQuery UI Datepicker object that is supposed to appear when I click inside a textbox. Below is the HTML code: <tr> <td class="label-td"><label for="dateOpen_add">Date Opened</label></td& ...

jqueryhtmlcssjquery-uiuidatepicker

Only the cursor CSS is applied to the parent div, not its individual elements within the div

The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...

jqueryhtmlcss

Stop browser from downloading attached file

<a href="/scripts/script.pde" target="_blank"></a> My goal is to have the browser show this file as text in a new window. Once clicked, it will be downloaded onto the user's computer. ...

htmltexthyperlinkhref

Arranging squares in a circular formation with Three.js

I am facing an issue with aligning squares within a circular grid to its center. Despite the correct center point, the entire grid is consistently skewed to the right. The problem could be due to incorrect calculations for removing squares outside the cir ...

javascripthtmlthree.js