show a picture and text side by side

Here's the CSS code I'm using:

<style type="text/css">
#box {
    width:100%;
    height:80px;
    background-color:#eeeeee;
}
.box-inner {
    width:80%;
    margin:0 auto 0 auto;
    text-align:center;
}
#text, #text a {
    font-size:16px;
    color:#F36F25;
    margin:10px;
}
#text:hover, #text a:hover {
    color:#666666;
    text-decoration:none;
}
#text img {
    vertical-align: middle;
    margin-right:20px;
}
</style>

Currently, it displays the image and text inline. However, I have multiple images and text below each other. How can I align all the images in the same position below each other?

Feel free to check out this fiddle for reference: http://jsfiddle.net/8dsTu/

css

Answer №1

Here is the link to view the code snippet

<div id="text">
    <img src="../images/icons/address.png" height="60" />
    <div style="display:inline-block;">
        Address 1,<br />
        Address 2,<br />
        County Post Code
    </div>
 </div>

Make changes in the CSS:

.box-inner {
     width:80%;
     margin:0 auto 0 auto;
     text-align:left;
     margin-left:100px;
}

Answer №2

It appears that your HTML code is not valid, as the id property should be unique and there are multiple instances of <div> elements with the same id="text". To achieve the desired outcome, you will need to make the following adjustments: (jsFiddle)

  1. Replace all occurrences of id="text" with class="text" and enclose each caption within a <div class="caption">:

    <div id="box">
    <div class="box-inner">
        <div class="text">
            <img src="../images/icons/telephone.png" height="60" />
            <div class="caption">00000 00 00 00</div>
        </div>
        <div class="text">
            <img src="../images/icons/email.png" height="60" />
            <div class="caption"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0d1f121b0d3e1a11131f1710501d11500b15">[email protected]</a></div>
        </div>
        <div class="text">
            <img src="../images/icons/address.png" height="60" />
            <div class="caption">Address 1,<br />Address 2,<br />County Post Code</div>
        </div>
    </div>
</div>

  2. Make adjustments to the CSS styling:

#box {
    width:100%;
    height:80px;
    background-color:#eeeeee;
}

.box-inner {
    width:80%;
    margin:0 auto 0 auto;
    text-align:center;
}

.text, .text a {
    font-size:16px;
    color:#F36F25;
    margin:10px;
}

.text:hover, .text a:hover {
    color:#666666;
    text-decoration:none;
}

.text img {
    vertical-align: middle;
    margin-right:20px;
}

.caption{
    display:inline-block; /* This is the new bit - display:inline-block does the trick. Adjust margin-top to your needs */
    vertical-align:top;
    margin-top:15px;
}

Answer №3

#container {
width:100%;
background-color:#eeeeee;

}

.inner-container {
width:80%;
margin:0 auto 0 auto;
text-align:center;

}

.content, .content-link {
font-size:16px;
color:#F36F25;

}

.content:hover, .content-link:hover {
color:#666666;
text-decoration:none;

}

.content-image {
vertical-align: middle;
margin-right:20px;
width: 60px;
background: black;
float: left;

}

.content {
overflow: hidden;
width: 250px;
margin: 10px auto;

}

Does this look good? Just remember to use classes instead of ids.

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

"Unlocking the Power of CSS: How to Effortlessly Align Text and Images

Dealing with an unchangeable piece of HTML can be frustrating, especially when it comes to styling. In my case, I have the following structure: <a title="some title" href="..."> <img src="....jpg"></img> Some text </a> Here ...

htmlcssimagecenterfixed

Exploring CSS3 for Creating Stylish Navigation Bars

Currently, I am attempting to design a Navigation bar that resembles the style shown in this image, complete with a drop-down menu feature. Here is how I have structured my menu: <nav> <ul> <li> <a href="/i ...

htmlcss

Ensure that radio buttons are positioned next to their respective labels on separate lines

My HTML form is structured with sections as described below: I prefer having the labels inline to prevent the section from being excessively tall, but I'm facing an issue where the radio buttons are not staying aligned with their respective labels. ...

htmlcssforms

Formatting text to automatically continue onto the next line without requiring scrolling through long blocks of

I have a unique Angular project with a terminal interface that functions properly, maintaining a vertical scroll and automatically scrolling when new commands are entered. However, I am struggling to get the text within the horizontal divs to wrap to the ...

javascripthtmlcssangular

The alignment of the horizontal menu items is off

Currently, I am working with asp.net and dealing with a horizontal menu issue. The alignment problem arises where the right side of Menu B appears higher than the left one (Menu A). I have included my code below for reference. Any suggestions or assistance ...

htmlcssalignment

What is the best method for adding a background image to a jumbotron in my Django project?

I have been struggling with this issue for some time now. Currently, I am working on a Django project and I need to add an image as the background in the jumbotron section. home.html {% extends 'blog/base.html' %} {% load static %} {% bl ...

pythonhtmlcssdjangotwitter-bootstrap

Webpage unable to scroll

Having trouble with scrolling on my webpage and I can't figure out why! The issue is happening when trying to view this page: Within the main file, I have included 2 other php files: <?php include '../../include/menu.php'; inclu ...

htmlcssscroll

Interacting with JQuery UI Button causes it to shift position on mouseover

In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves u ...

jqueryhtmlcssajax

When loading HTML using JavaScript, the CSS within the HTML is not properly processing. Leveraging Bootstrap 5 might help resolve

Currently utilizing bootstrap 5 for my project. I have a setup in index.html where I am loading the contents of nav.html using JavaScript. However, I am facing an issue wherein the CSS styling for the navbar is not being applied when loaded via JS. Strange ...

javascripthtmljquerycssbootstrap-5

Finding the image source of a clicked image

Is it possible to retrieve the image src after clicking on another image? $(document).ready(function() { $('img.getimage').click(function() { alert($(this).attr('src')); }); }); .sinistra { width: 150px; } .getimage { wi ...

jquerycssonclick

Obtaining the width of a scrollbar using JavaScript in the most recent version of Chrome

Looking for a way to determine the width of the scrollbar using JavaScript for CSS purposes. I attempted the following: document.documentElement.style.setProperty('--scrollbar-width', (document.offsetWidth - document.clientWidth) + "px" ...

javascripthtmlcss

Tips for aligning the first row of a table with a line of text

I need assistance aligning the first row of a table with a line of text. Specifically, I am trying to achieve ** some text ** |first row of table      |             ...

htmlcss

The automatic redirection feature on a webpage is not functioning correctly on mobile devices

There's a peculiar issue on our website that I'll do my best to explain, and I'll provide photo links for more clarity. In our WooCommerce site, the process of paying for the cart goes as follows: Click "place order" button pic: Page for o ...

phpcsswordpress

"Maximizing Space: A Guide to Setting BootStrap Navbar on the Right Side of the Page with Dropdown Width

Take a look at the image below. There is a navbar toggle button on the upper right corner of the page. When I expand it, the dropdown items occupy the entire width of the page, causing an issue where clicking anywhere within the red box triggers the dropdo ...

htmlcssangulartwitter-bootstrap

Issue with Firefox hover effect not applying transform:scale

I'm experiencing some difficulties with the border colors when using transform:scale on my element. I want to find out if there is a known solution to this issue. Removing the scale animation resolves the problem and the borders return to normal. I ha ...

htmlcssfirefox

"div p" or "div * p"? Do they have the same meaning or is there a difference between them?

My knowledge of the "grandchild" selector in CSS was limited until I came across this insightful article. Intrigued, I decided to experiment with it and found that it resembles the universal selector (which targets all elements). Let's take a look at ...

htmlcsscss-selectors

React fullpage.js causing z-index stacking problems

Take a look at the demo here: I'm having trouble getting the 'more info' modal to display above all other elements on the screen. Here's the desired stacking order, with the highest stacked element listed first: modal nav open header ...

cssreactjsz-indexfullpage.js

Having trouble getting my soundboard to work properly on mobile devices

I recently created a soundboard using HTML5, CSS3, and JavaScript. While the audio plays back perfectly on my computer when I click the buttons, I encounter an issue when trying to use it on a smartphone. <!DOCTYPE html> <html lang="en"> <h ...

javascripthtmlcssmobile

How can I personalize the preview feature in a Bootstrap rich text editor?

Currently, I am utilizing Bootstrap's rich text editor by this method $('#editor').wysiwyg();. Utilizing AJAX, I am passing the HTML content created by .wysiwyg to save it in the database. Later on, I plan to retrieve the saved HTML data to ...

jquerycsshtmlbootstrap-4rich-text-editor

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

htmlcssp5.js