Showcasing both text and image side by side

https://i.sstatic.net/zR1G1.png

Our current method for displaying text in one line and an image below it is shown below.

I attempted to achieve this using 

position : relative: top: xxpx; bottom: xxpx;
, but I believe there may be a more efficient way to code this.

https://i.sstatic.net/qmF38.png

html

<div class="cc51">
   <?php echo $this->__('Add/Change Background color'); ?>
   <div class="cc55"><img src="<?php echo $this->getSkinUrl('images/circle.PNG') ?>" alt="image upload button" /></div>
   <br/>
</div>

css

.cc51 {
     margin-top: 40px;
     font-size: 24px;
}
.cc55 {

}
htmlcss

Answer №1

Simply include inline-flex

cc51{
   display:inline-flex;
 }

Implement the code above in your css or utilize the css options provided below

You can also choose to use the following css.

     .cc51{
       float:left;
     }
     .cc55{
       float:right;
     }
     .cc54{
        clear:both;
     }

Answer №2

If you require support for older browsers, one effective way to achieve this is by utilizing the white-space: nowrap; property to keep elements on a single line even on smaller screens.

.cc51 {
  font-size: 24px;
  white-space: nowrap;
}
.cc55 {
  display: inline-block;
  vertical-align: middle;
}
<div class="cc51">                  
  Add/Change Background color
  <div class="cc55"><img src="http://placehold.it/35/f00" alt="image upload button"/>
  </div>
</div>

Furthermore, it is possible to eliminate the inner div

.cc51 {
  font-size: 24px;
  white-space: nowrap;
}
.cc51 img {
  vertical-align: middle;
}
<div class="cc51">                  
  Add/Change Background color
  <img src="http://placehold.it/35/f00" alt="image upload button"/>  
</div>

Additionally, the img element can be omitted entirely

.cc51 {
  font-size: 24px;
  white-space: nowrap;
}
.cc51:after {
  content: url(http://placehold.it/35/f00);
  vertical-align: middle;
  display: inline-block;
}
<div class="cc51">                  
  Add/Change Background color
</div>

Answer №3

To change the background color on a text element, you have two options:

display: inline-block;

You can also float the elements to the left or right:

float: left;

Make sure to clear the floats after making your changes:

clear: left;

Answer №4

Feel free to experiment with the following CSS snippet

.cc51 {
  margin-top: 20px;
  font-size: 24px;
  float: left;
}
.cc55 {
  float: right;
}

Answer №5

utilize

.cc51
{
 margin-top: 40px;
 font-size: 24px;
 display:flex;
 align-text:center;
}

in this manner, the image will be positioned in the center of the text

check it out here : jsfiddle

Answer №6

To have both text and image appear on the same line, you can utilize the display: inline-block property.

.cc51 .text,
.cc51 .cc55 {
  display: inline-block;
  vertical-align: top;
}
<div class="cc51">                  
  <div class="text">Add/Change Background color</div>
  <div class="cc55">
    <img src="<?php echo $this->getSkinUrl('images/circle.PNG') ?>" alt="image upload button"/>
  </div>
</div>

Answer №7

Adjust the position (float) to suit your needs

cc51 img{
     display:inline; float:right; vertical-align: middle;
 }

Answer №8

To achieve the desired layout, you can utilize the CSS property display:inline-flex

.cc51
 {
     display:inline-flex;
 }
<div class="cc51">                   
             Add/Change Background color          
            <div class="cc55"><img src="<?php echo $this->getSkinUrl('images/circle.PNG') ?>" alt="image upload button"/></div>
            <br/>
</div>

Answer №9

After clicking on the website shared in the post, I successfully tested the code provided below:

.cc55 {
   display: inline-block;
   vertical-align: middle;
}

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

Managing Image Quality with Unsplash API

How can we ensure high quality images are embedded on the web using Unsplash API or other methods? The image displayed in the example below appears blurry and unclear compared to the original image. Original Image link: Example of embedding the image abo ...

javascripthtmlcssapi

Implementing mouse hover functionality for fieldset in EXTJS

I am looking to enhance the following code snippet by adding a mouse hover event that changes the background color of the fieldset item and displays an image next to it. Can someone assist me with this modification? var mainGroup = { ...

javascriptcssextjsmouseover

Different methods to disable scrolling when the mobile menu pops up

I have implemented a mobile menu option that appears when you click on the triple line logo, but unfortunately, users can still scroll while the menu is open. I've tried using position:fixed; but haven't been successful in preventing scrolling be ...

javascripthtmlcss

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

javascriptjquerycss

Manipulate CSS Properties with Javascript Based on Dropdown Selection

I am currently working on implementing a feature that involves changing the CSS property visibility: of an <input> element using a JavaScript function triggered by user selection in a <select> dropdown. Here's what I have so far in my cod ...

javascriptjqueryhtmlcss

Having difficulty getting mask-image to function properly in Safari browser

My table row is styled with the following CSS code: .table-row-mask { mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); } <table><tr class="table-row-mask"><td>Test</td></tr></table> This ...

htmlcss

CSS creates captivating image hover transitions with span elements

<a href=""><img src=""><span>content</span></a> When I hover over the image, the content within the span appears using relative positioning with display set to none and absolute positioning in the span tag. My query is regard ...

htmlcsscss-transitions

What can be done to prevent inputs from shifting when resizing a browser window?

I am struggling to align checkboxes and text on a PHP form I am creating. No matter what I try, they end up misaligned when the browser is resized. Any suggestions on how to solve this alignment issue without changing the format of the rest of my page wou ...

phpcsshtml

Creating a fresh HTML document when logging in

Upon successfully logging in, I am unable to access the file success.html. This is my code on the client side <!DOCTYPE html> <html> <head> <title>Login Page</title> <style> //CSS Styles </style> ...

htmlnode.jsexpress

Navigating without the need for a mouse click

Is there a way to automatically redirect without user interaction? I need the redirection to happen without clicking on anything <script> setInterval(function(){ window.location.replace("http://your.next.page/"); }, 5000); // Redirec ...

javascripthtmljquery

Create a layered panel underneath a button that covers a separate element

I am working on a layout that consists of an editor and multiple buttons positioned above it on the right side. My goal is to add a panel just below "Button2" that will overlay the editor. This panel should expand and collapse when "Button2" is clicked, wh ...

cssreactjscss-positionfluent-uifluentui-react

Do mobile CSS/HTML have distinct rules to follow?

I am having trouble displaying a background image in CSS. Additionally, I am unable to set a background color for a div. #mlogo { background-image: url(/mobileimages/2015LOGOFB.jpg); background-size: 100%; background-position: top; backgro ...

htmlcssbackground

The Carousel Slider seems to encounter issues when trying to implement it with *ngFor in Angular 8

Currently tackling an issue in Angular 8 where my slider functions perfectly with static data. However, upon attempting to loop through some dynamic data, the 'left' and 'right' buttons on the carousel cease to work. The images also fai ...

javascripthtmlangulartypescriptbootstrap-4

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

javascriptjqueryhtmlcss

css - Showcasing images with a horizontal scrollbar

I'm having an issue with displaying multiple images in a fixed-width div horizontally. I want to have a horizontal scroll bar for the images that exceed the width of the div. Currently, the images are appearing vertically instead of side-by-side. Is ...

cssscrolloverflow

Tips for implementing ng-hide/ng-show animations

Is there a way to create an animation on an element in Angular that will be triggered when the item's visibility is changed using ng-hide/ng-show? Which specific CSS classes should be included to ensure smooth animations on elements? ...

cssangularjscss-animations

Is there a way to effectively utilize Twitter Bootstrap classes such as "row" and "span(X)" specifically for @media print?

Currently, I am facing the challenge of printing web pages on my website and I am seeking advice on how to effectively utilize the row and spanX Bootstrap classes to better manage the content displayed on the printed page. For instance: <div class= ...

csstwitter-bootstrapmedia-queriesprinting-web-page

Looking to transform a nested JSON structure into a visually appealing HTML table with merged rows?

My JSON structure appears as follows: $scope.data = [ { "type":"Internal", "count": 3, "library" : [ { "type":"Library 123", "count": 2, "version" ...

javascripthtmlarraysangularjsjson

Utilize JavaScript to send an email containing a link and content

In the html form, there are input fields for adding a new user to the database. Once a user is added, an email is sent to them using the sendmail() function in the adduser.js file. The email is sent successfully according to my standards. However, I want t ...

javascriptjqueryhtmlnode.jsjsonp

What process does JavaScript use to interpret indexing?

function highlightRow(searchRow) { if(searchRow != null) { var oRows = document.getElementById('Table').getElementsByTagName('tr'); //use row number to highlight the correct HTML row ...

javascriptjqueryhtmldom