How can I position an image in between buttons using CSS?

I need help with my website layout, specifically with the arrangement of elements:

<div><Label>                              <Button1><Image><Button2></div>

Unfortunately, the div is not displaying in a single line as intended.

The CSS code for the div is as follows:

width: 100%;
display: block;

For the image, I have used the following styles:

clear: both;
width: 90px;
height: 40px;
margin-left: 3px;
margin-right: 3px;
margin-top: 5px;

And for the button:

float: right;
margin-top: 12px;
height: 45px;
width: 45px;
margin-right: 5px;

However, this results in the elements being displayed like this:

 <div><Label><Image>                            <Button1><Button2></div>

When I apply float: right to the image, the layout looks like this:

<div><Label>                           <Button2></div>
                                 <Button1><Image>

How can I achieve the desired layout?

htmlcss

Answer №1

Adjust the layout by floating the label to the left and aligning the buttons & image.

div {
  text-align: right;
}
button,
img {
  vertical-align: middle;
}
label {
  float: left;
}
<div>
  <label>This is a label</label>

  <button>Click Here</button>
  <img src="http://lorempixel.com/output/abstract-q-c-50-50-6.jpg" alt="" />
  <button>Submit</button>
</div>

Answer №2

Are you looking to have everything in one line with an image between the buttons? If so, I've got the solution tailored to your preferred styling: http://jsfiddle.net/cn61gxmh/6/

 <div class="wrapper">
    <label>label </label>
    <div class="buttons">
       <button>button 1</button>
       <img></img><button>button 2</button>
    </div>
 </div>

.wrapper img{
width: 90px;
height: 40px;
margin-top: 5px;}

.buttons{text-align: right;}

button{
   margin-top: 12px;
   height: 45px;
   width: 45px;
    margin-right: 5px;
}

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

What is the secret to aligning two elements flawlessly?

I'm currently working on completing a theme and I've hit a roadblock. I am trying to add header support, but it's causing issues with my layout. Everything was running smoothly until I inserted this line of code: <img src="<?php heade ...

csswordpress

VueSax notifications are showing up in the wrong place

Could it be my fault or is it due to the alpha status of vuesax that the notifications I want to use are displaying incorrectly? Here is the code extracted from the documentation: openNotification (title_, text_) { //This code is placed inside Vue methods ...

javascriptcssvue.jsvuesax

display images fetched from a PHP/MySQL database in a jQuery dialog box

UPDATE: A solution has been found and the code has been updated accordingly. Currently, I have the images stored in a directory on my local system where I am hosting an IIS server. I am able to retrieve these images successfully and display them using the ...

javascriptphpjqueryhtmlmysql

Using Rails to load an image from CSS

My current approach to loading an image is using this code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div>, which successfully displays the image. However, I am interested in loading the image from a CSS file instead. After resea ...

cssruby-on-railslessasset-pipeline

Adjust the size of divs using JQuery UI's draggable feature

Looking for a way to make two divs share 100% of their parent's width, with a dynamic resizing feature in between them? Check out my solution here: http://jsfiddle.net/aRQ7a/ However, I'm facing an issue where when I decrease the size of the pre ...

javascriptjqueryhtmlcssjquery-ui

Change occurring within a cell of a table that has a width of 1 pixel

In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...

javascripthtmlcss

How to ensure HTML elements are styled to occupy the full width of their parent container while respecting the minimum width requirement

Is there a way to make HTML elements have a width ranging from 150px to 200px while filling up 100% of their parent's width? Check out Image 1: https://i.sstatic.net/nYNGp.jpg And here is Image 2 (after resizing the window): https://i.sstatic.net/ ...

htmlcssflexbox

Angular 4 Placeholder Feature with Bootstrap 4

I created a Select with dynamic values using the ngModel directive and the Bootstrap Framework, and it's working. However, I am facing an issue where I want to add a placeholder, but the ng directive is causing it not to work. Below is my current cod ...

htmlangularbootstrap-4

What steps should be taken to create this specific layout using Vue-Bootstrap?

Currently tackling a web project and aiming to design two rows that resemble the following layout: https://i.sstatic.net/tLv1h.png Details of the screenshot (such as icons) are not necessary, but rather focusing on the arrangement of aligning two rows bes ...

htmlcssvue.jsbootstrap-4

The .remove() method is ineffective when used within an Ajax success function

I am facing an issue with removing HTML divs generated using jinja2 as shown below: {% for student in students %} <div class="item" id="{{ student.id }}_div"> <div class="right floated content"> <div class="negative ui button compa ...

javascriptjquerycsshtml

How can Selenium click on an <a> element using By.LinkText and bypass any line breaks within the link text?

One a element contains text with \r\n within it. The HTML code is shown below: <a href="/Profile/ProfileView?isSuccessScreen=1&amp;URLID=x/ayvqzf7zojzzqiauihka" class="list green profile "> <img src="/content/css/theme/images/pro ...

c#htmlselenium-webdriver

Using CSS in Visual Studio Code allows you to easily select multiple lines and comment out each line within the selection individually

When working on CSS in Visual Studio Code, I encountered an issue where I need to comment out multiple lines of property:value code separately. For instance: Before: body { width: 0px; height: 0px; color: red; } After highlighting the width, height, and ...

cssvisual-studio-codecomments

Turn off background sound on mobile devices

I have a question about the script I'm using to play a background audio theme on my website - is there a way to prevent it from automatically playing on mobile devices? $(document).ready(function() { var audioElement = document.createElement ...

jqueryhtml

Discover a helpful tip for using Pentadactyl with StackExchange's voting buttons

Does anyone know how to enable hinting for voting arrows on StackExchange using Pentadactyl (a fork of Vimperator)? I've tried removing my .pentadactylrc file and restarting Firefox, but still can't figure out how to upvote questions and answers ...

javascriptcssfirefoxvimperator

Navigating with Angular Bootstrap Navbar Dropdowns

Currently, I am in the process of developing an Angular project that includes a Bootstrap Navbar. The Navbar features dropdown menus with items that direct users to various pages. To achieve this, I have incorporated Bootstrap, jQuery, and Popper into my ...

htmljqueryangulartwitter-bootstrapbootstrap-4

Find the size of the grid using the data attribute

I am currently working on a piece of code that involves fetching a data-attribute known as grid size from the HTML. My objective is to create a conditional statement that checks whether the value of grid size is "large" or "small", and assigns specific x a ...

javascriptjqueryhtml

Changing the class of an element using CSS when hovering over another

Is it possible to dynamically change the style of another element when hovering over a specific element? For example, I want a menu item to change its appearance when hovering over a submenu item. Here is the CSS code I have: ul.menu .menulink { padding ...

jquerycss

What could be causing my PHP login page to malfunction?

I'm facing an issue with my code where nothing happens when I click the submit button. This is puzzling as the same code worked perfectly fine in a previous project. I'm unable to pinpoint where the problem lies. Here's the HTML form: < ...

phphtmlmysqlauthentication

Encountering Empty Output When Trying to Save HTML Form Data to Database

I have recently started learning PHP and web development, and I am attempting to build an HTML form that will submit data to MYSQL. After submitting the form and checking phpMyAdmin, it shows that a row has been submitted, but the row is empty. Previously ...

phphtmlmysql

My HTML loop is functioning properly with a variable, however, it is not working as expected

Hi there! Here is a piece of code that includes a loop with a timer. I am trying to change a variable using a button, however, it's not working as expected. <!doctype html> <html> <body> <script> var timer = 1000; var counter ...

htmlloops