"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 is the current CSS in place:

div.container-outer {
width: 25%;
float:left;
}
div.container-inner {
width: 156px;
margin: 5px;
}
div.container-inner img {
max-width: 156px;
max-height: 124px;
}

My goal is to center the text under the image and have both elements centered within a fixed-width containing div. The dimensions of the images are unpredictable, but there are max-width and max-height constraints to consider. Additionally, I want the bottom of the picture to stay at a fixed position inside the containing div.

I am open to modifying the surrounding HTML code if necessary. Any suggestions on how to achieve this layout would be greatly appreciated!

Best Regards, Markus

edit 130513 ------------------------------------------------

After experimenting with the current CSS provided above, I am still unable to achieve the desired layout. The image remains left-aligned, causing the text below to also align to the left. Furthermore, any changes in image height result in fluctuations in the positioning of the lower part of the image due to its top alignment.

htmlcssimagecenterfixed

Answer №1

Have you given this a shot?

<div style="text-align:center">
    <img src="..." alt="..." /><br />
    <span>text</span>
</div>

You have the flexibility to adjust the width of the div directly in the style attribute. Remember to include a line break after the image tag since images are considered inline elements similar to regular text.

The span element is included for potential future styling purposes.

Answer №2

I'm struggling to achieve this effect using CSS at the moment. Do you think JavaScript could be a better solution?

<!DOCTYPE html>
<html>

<head>
    <style>
        div.container-inner {
            width: 156px;
            text-align: center;
            border: 1px solid red;
        }
    </style>
    <script>
        function addLineBreak() {
            document.getElementById('container-inner').innerHTML = document.getElementById('container-inner').innerHTML.replace(/(<img.+?>)/, '$1<br>');
        }
    </script>
</head>

<body onload="addLineBreak();">
    <div id="container-inner" class="container-inner">
        <a title="some title" href="...">
            <img src="images/sample.jpg">
            Some text
        </a>
    </div>
</body>

</html>

See it in action here:

For your information, </img> is not considered valid HTML and may not appear in .innerHTML even if it's present in the source code.

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

Achieve a sleek, modern look by using CSS to add a border with crisp square

Hello everyone, I'm currently attempting to add a border to only one side of an a element. However, when I add the border to just one side, it creates a sharp diagonal edge: https://i.stack.imgur.com/pAqMM.png My goal is to eliminate the sharp edge ...

htmlcss

The background image on mobile devices is excessively zoomed in

My RWD page is experiencing a strange issue with the background image. The image has the following styles: #background-image { width: 100%; height: 100%; opacity: 0.5; position: absolute; z-index: -1; background-image: url('../landing.jpe ...

cssgoogle-chromeresponsive-design

Comparing the impact of class and element selectors on CSS performance

Considering that CSS is read from right to left, I am pondering the balance between performance and readability when it comes to adding classes to HTML in order to more efficiently target elements in CSS. Additionally, I am curious about how using a gener ...

htmlcss

CSS overflow property does not take effect when set to hidden

I'm having trouble understanding why the overflow: hidden property is being overridden by a descendant element. Take a look at this example I've put together http://jsfiddle.net/2fRxc/. HTML <div class="relative"> <div class="overf ...

htmlcss

Is the Bootstrap carousel sliding to the top after clicking the next and previous buttons?

Here is the carousel I created using Bootstrap: <div id="carouselExample" class="carousel slide d-none d-sm-none d-md-block" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active ...

htmlcssbootstrap-4carousel

Combining text and images in XSLT using CSS: A comprehensive guide

Greetings! I am facing a situation where I have an XML file containing image tags like this: <pb facs="ciao.jpg">. Additionally, I have an XSL file that includes a JavaScript snippet as shown below: <script type="text/javascript> function ...

cssimagetext

Use a jQuery or XPath selector to choose certain HTML tags from a list of HTML tags

Consider this html structure : ... <div class="a">April 2018</div> <div class="b">Monday 02</div> <div class="c">...</div> <!-- Capture this tag and its children --> <div class="c">...</div> <!-- ...

javascriptjqueryhtmlxpath

How can I showcase the initial page on my local server?

Currently, I am utilizing Xamp for website development. Within my project directory, there is a folder named HTML which contains a page called Cart.html. This HTML folder is located in the htdocs directory. My goal is to have the Cart.html page automatic ...

htmlxampphtdocs

Expand the size of bootstrap-datepicker to fill the entire screen

I've implemented the plugin from https://github.com/uxsolutions/bootstrap-datepicker Check out the JSFiddle demo: https://jsfiddle.net/j3b089gr/ In my example, I have the calendar displayed along with the HTML code: <div class="row"> <di ...

jquerycssbootstrap-4bootstrap-datepicker

What is the best way to ensure both landscape and portrait images are completely responsive and equal in height within a carousel?

I am currently working with a bootstrap carousel that contains both portrait and landscape images. On wide screens, the carousel height is automatically set to match the tallest image's height. However, this behavior results in white spaces on the top ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-carousel

Retrieve the element that is currently being hovered over within the same nested selector

I am facing a challenge in selecting the currently hovered element with a nested selector. The ".frmElement" class is used as the selector. When I hover over the ".frmElement" element at a certain level, all the previous selector elements display the hover ...

javascriptjqueryhtmlcss

Is the phrase "This site was built with Wix" visible on the website?

Recently, I've begun using Wix to build a website. I'm curious - does the message 'This website is created using Wix' appear at the top and bottom of the page when it's published? 'This website is created using Wix' I ...

html

Switch div and expand/shrink the rest

Apologies for what might seem like a trivial question, but after working for a few hours now, I'm finding it difficult to wrap my head around this. My initial instinct is to handle this by manipulating the entire div structure with JavaScript, but I c ...

javascriptjqueryhtmlcsstwitter-bootstrap

Converting JavaScript variable values to PHP variables by extracting the content of a textarea

Currently, I'm developing a data filtering mask which triggers when the button <input type="button" /> is clicked. In this process, I have: School classes (1, 2, 3, 4, 5) Sections (A, B, C....Z) Checkboxes for male and female sexes. This ma ...

javascriptphphtmlmysql

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

I am currently developing a server using expressjs: 'use strict'; var express = require('express'); var logger = require('morgan'); var path = require('path'); var bodyParser = require('body-parser'); va ...

javascripthtmlcssexpress

html Tips for referencing a file in an input tag

Imagine you have a basic form with an <input type="file"> tag. What I aim to achieve is, once the user selects a file (which is an image), I want to display that file on the same page for viewing - providing a better user experience. I attempted to ...

jqueryhtml

Is there a way to automatically remove a video using JavaScript once it has completed playing?

This is my HTML section: <section id ="information"> <video id ="videoName" width="800" height="400" controls onplay="myAnimationPicture()""> <source src="video/videoName.mp4" ; type="video/mp4"> Your browser does not support the ...

javascripthtmlhtml5-video

Tips for embedding 2 rows within a <td> element in a DataTables table

Here's a unique layout I want to achieve using the DataTables plugin. https://i.sstatic.net/YxfOk.png Notice how the address spans across 3 columns. This html code disrupts the sorting feature of DataTables and causes the table to shift. Here&apos ...

jqueryhtmlcssdatatables

Positioning two buttons with one on the left and the other on the right

I am currently looking to add an ADD button next to the VIEW button in this layout. An example of what I am trying to achieve can be seen at where you can click on the GRID VIEW icon. <div class="desktop_view product-view grid-list-row-view hide" sty ...

css

What is the best way to achieve concave borders in HTML/CSS, similar to the example provided?

Check out this unique graphic created with normal divs in a flexbox layout, courtesy of mode.com. https://i.sstatic.net/hWwhQ.png Ever wondered how this effect is achieved? Upon inspecting the page source, I discovered that there are four elements arrang ...

htmlcssuser-interface