Tips on how to align text vertically next to an image

I am struggling to vertically center the text alongside an image on my website. Despite my efforts, I can't seem to get it right. Do you have any suggestions on why this might be happening? I've tried searching for a solution but haven't had any luck so far. Any help would be greatly appreciated! Thank you!

(Please adjust the width of the results window to better visualize the issue.)

Check out the code on JSFiddle.

Here is the HTML:

<div class="first">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Quisque varius pulvinar imperdiet. Cras quam orci, <br> 
       Duis vulputate risus rutrum, elementum purus non,</p>
    <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg">
</div>

And here is the CSS:

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    vertical-align: middle;
    line-height: 0;
}

.first p {
    display: inline-block;
    width: 49%;
}

.ipad {
    display: inline-block;
    width: 49.2%;
}
htmlcss

Answer №1

If you're looking to center content vertically using CSS, the following code snippet might just work for you:

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    line-height: 0;
}

.first p {
    vertical-align: middle;
    display: inline-block;
    width: 49%;
}

.ipad {
    vertical-align: middle;
    display: inline-block;
    width: 49.2%;
}

To achieve vertical alignment, simply apply vertical-align: middle to both .first p and .ipad.

Remember that the vertical-align property is not inherited, so make sure to specify it for the child elements you want to adjust.

For more information, refer to: http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

You can also check out a live demo on JSFiddle here: http://jsfiddle.net/audetwebdesign/UwffH/

Answer №2

My recommendation is to utilize the <table> tag, although it's not considered a best practice in programming.

Here is an example of HTML code:

<div class="first">
    <table border='0'><tr><td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius pulvinar imperdiet. Cras quam orci, <br> Duis vulputate risus rutrum, elementum purus non,  </p></td><td>
        <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg"></td></tr></table>
                    </div>

Below is the corresponding CSS code:

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    vertical-align: middle;
    line-height: 0;
}

.first p {
    display: inline-block;
    width: 49%;
}

.ipad {
    display: inline-block;
    width: 100%;
}

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

How can I convert a button to a link within an HTML table?

I have a question regarding buttons in my HTML table. Is it possible that upon clicking a button, the link button changes to "Un-Extend," and then switching back to the previous button when clicked again? How can I achieve this functionality? https://i.sst ...

javascriptjqueryhtml

`Arranging miniature images within tabbed sections`

I have been implementing angularjs to render my HTML and utilizing bootstrap 3 for styling. While the tabs are rendering correctly, I am facing an issue where the images within each tab are not displaying in a grid layout; instead, they are being outputt ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

HTML and CSS are two separate languages that work together to create web pages

I'm experiencing an issue with my CSS file not responding to my HTML file. I have imported the CSS file into my HTML file and both files are located in the same directory. It was working fine when they were written in the same file, but after separati ...

htmlcss

Align two child elements vertically in the center using flexbox

I require your assistance; I have been attempting to center the text vertically within this div, but all my efforts thus far have been unsuccessful. I have included the default layout for reference. While using padding may offer a solution, I believe that ...

htmlcssflexbox

Clicking on the background does not alter the onclick function

Can anyone help me troubleshoot my code? My function load() isn't changing the background of .firstDiv for some reason. I've checked multiple times but I can't seem to spot any errors. function load() { document.getElementsBy ...

htmlcssonclick

Utilize flexGrow property to make Material UI Grid container expand dynamically

I've been working on a chat window layout that features my users on the left and messages on the right. However, I'm facing an issue with making both columns extend to the end of the viewport or footer. Below is the component code I'm using: ...

cssflexboxmaterial-ui

Seeking assistance with changing the pages

Looking for assistance with troubleshooting my function. All variables are accounted for. var swith = document.getElementById("sub"); var one = document.getElementById("rule"); var two = document.getElementById("cool"); var three = document.getElementByI ...

javascripthtml

Convert HTML tables from Yahoo Pipes into an array of JSON objects

Currently, I am experimenting with Yahoo Pipes in an attempt to convert multiple tables within a DIV into an array of JSON objects. At the moment, the HTML is being successfully parsed. Here is my current setup on Yahoo Pipes I envision each table cell ...

htmljsonyahoo-pipes

AngularJS - displaying a notification when the array length is empty and customizing the visibility to conceal the default action

I've been working on an Angular project where I display a loading circle that disappears once the content is loaded. This circle is simply a CSS class that I call from my HTML only when the page first loads, like this: Actually, the circle consists o ...

javascriptcssangularjs

trigger jquery popup from server-side code (ASP.Net VB)

Within my code, I have created a div element which serves as a popup message: <div class="info message"> <h3>Informa&ccedil;&atilde;o</h3> <p>Mensagem informativa.</p> </div> In addition, ther ...

jqueryasp.netcss

Styling a nested scrollbar using JQuery

I am looking to customize two scrollbars using a jquery plugin or JS library. Here is the HTML code: <div id="container"> <div class="fixedHeightContainer"> <div class="fixedHeightContent"> Lorem ipsum dolor sit amet, con ...

javascriptjqueryhtmlscrollbar

A CSS hack for showcasing numerous div elements

I am looking to divide my window into two equal parts, with the same height but each taking up 50% of the width. Here is the CSS I used: .container { display: flex; height : 100%; } .column { flex: 1; height : 100%; } .column-one ...

htmlcssflexbox

The content of the HTML request may not always be displayed exactly as it appears in the browser

I've been trying to extract comments from a website using Python and urllib. Although I am successful in obtaining the HTML, I noticed that the comment section is missing. Here's what my Python code retrieves: <div data-bv-product-id="681012 ...

pythonhtmlurllib

Is it possible to retrieve a (escaped) HTML attribute from an XML node using XPath?

In this scenario, the XML node labeled 'description' includes HTML that has been escaped. My goal is to extract the src attribute from the first img tag. Is there a method in XPath to accomplish this task? <item> <description>&am ...

phphtmlxmlxpath

Adjusting Font Sizes with Bootstrap 4 Media Queries: A Simple Guide

I recently incorporated Bootstrap into my project, but I've encountered an issue with the fixed heading sizes. I'm attempting to modify the font size of my project, especially because the h1 and h2 text appears overly large on mobile devices. Str ...

htmlcssbootstrap-4

Select-menu-responsive navigation options

I've scoured the internet for a solution to my problem with no luck. Hopefully, someone here can assist me. I currently have this piece of functional code: <header data-role="header"> <nav data-role="navbar"> <a href="i ...

jqueryhtml

Display three images with titles in a row using CSS

I'm trying to align 3 figures with captions horizontally in the middle of the page, side by side, but so far I've only been able to do it vertically. How can I achieve this using just HTML5 and CSS? This is my current HTML: <div class="r ...

htmlcss

What is the method for setting a default value for a disabled input?

<input type="checkbox" disabled="disabled" checked="checked" name="is_ok" id="id_is_ok"/> Is there a way to set a default value for this disabled input? I've noticed that if this field is disabled and I make edits to my data, the changes are n ...

javascripthtml

Can I use AJAX to load an entire PHP file?

My goal is to trigger a PHP file for sending an email when the countdown I created reaches zero. The PHP code contains the email message and does not involve any UI elements. I suspect that my approach may be incorrect, especially since I am not very fami ...

javascriptphphtmlajax

Using Bootstrap multiselect, you can easily control the display of a second menu based on the selection in the first menu

On my website, I am working with two menus. When I select Abon from the first menu, it should display all li elements under the Abon optgroup (Abon-1, Abon-2). If I uncheck block in the second menu, those elements should disappear. The code consists of Sel ...

javascriptjqueryhtmltwitter-bootstrap