Guide on aligning svg and button horizontally while maintaining vertical alignment

I found this interesting code snippet:

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.container {
  padding: 1rem;
}

.clearfix {
  clear: both;
}

.has-border {
  border: 2px solid #000;
}

.d-inline-block {
  display: inline-block !important;
}

.align-middle {
  vertical-align: middle !important;
}
<div class="has-border">
  <div class="container">
    <div class="div1 float-left">
      Contact
    </div>
    <div class="div2 float-right">
      <button class="d-inline-block">
      Hey
    </button>
      <svg width="20" height="20">
      <circle cx="10" cy="10" r="40"
      stroke="green" stroke-width="4" fill="yellow" />
    Sorry, your browser does not support inline SVG.
    </svg>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

It's obvious that the button and svg are positioned next to each other but lack vertical alignment.

What is the best way to align the svg and button vertically while keeping them side by side?

htmlcsssvg

Answer №1

I utilized flexbox for the alignment of the elements and made some enhancements to your code.

.container {
  padding: 1rem;
  display: flex;
  align-items: center; /* vertically centered */
}

.has-border {
  border: 2px solid #000;
}

.div2 {
  margin-left: auto; /* Shifts it to the right */
  display: flex;
  align-items: center; /* vertically centered */
}
<div class="has-border">
  <div class="container">
    <div class="div1">
      Contact
    </div>
    <div class="div2">
      <button>
      Hey
    </button>
      <svg width="20" height="20">
      <circle cx="10" cy="10" r="40"
      stroke="green" stroke-width="4" fill="yellow" />
    Sorry, your browser does not support inline SVG.
    </svg>
    </div>
  </div>
</div>

Answer №2

To enhance the layout, it is recommended to eliminate the float-left and clearfix classes. Instead, apply display: flex; to .float-right and use 

display: flex; align-items:center;
for .container

.float-right {
  margin-left: auto;
  display: flex;
}

.container {
  padding: 1rem;
  display: flex;
  align-items: center;
}

.has-border {
  border: 2px solid #000;
}

.d-inline-block {
  display: inline-block !important;
}
<div class="has-border">
  <div class="container">
    <div class="div1">
      Contact
    </div>
    <div class="div2 float-right">
      <button class="d-inline-block">
        Hey
      </button>
      <svg width="20" height="20">
        <circle cx="10" cy="10" r="40"
        stroke="green" stroke-width="4" fill="yellow" />
      Sorry, your browser does not support inline SVG.
      </svg>
    </div>
  </div>
</div>

Answer №3

apply display:flex; and align-items:center; to the .float-right class in the following manner:

.float-right {
  float: right;
  display:flex;
  align-items:center;
}


.float-left {
  float: left;
}

.float-right {
  float: right;
  display:flex;
  align-items:center;
}

.container {
  padding: 1rem;
}

.clearfix {
  clear: both;
}

.has-border {
  border: 2px solid #000;
}

.d-inline-block {
  display: inline-block;
}

.align-middle {
  vertical-align: middle;
}
<div class="has-border">
  <div class="container">
    <div class="div1 float-left">
      Contact
    </div>
    <div class="div2 float-right">
      <button class="d-inline-block">
      Hey
    </button>
      <svg width="20" height="20">
      <circle cx="10" cy="10" r="40"
      stroke="green" stroke-width="4" fill="yellow" />
    Sorry, your browser does not support inline SVG.
    </svg>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

Note: it is also unnecessary to include !important

Answer №4

Include the following style properties in the button's css:

vertical-align: middle;

Also, make sure to add these styles to the svg as well: 

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

Adaptable website design featuring dynamic data grid

I've spent quite some time searching for a way to achieve the layout displayed in the linked image, but I haven't been successful in finding exactly what I need. https://i.sstatic.net/6xOql.png My goal is to create a responsive layout that inclu ...

htmlcsslayoutweb

The AppJS warning: A potentially dangerous JavaScript attempt to access a frame with a URL

I am currently working on a desktop application where I am trying to filter specific divs inside an iframe using AppJS. However, I am facing an issue with hiding some of the div elements. Here is the code snippet: <!DOCTYPE html> <html> <s ...

jqueryhtmlappjs

Tips for accessing form data that has been automatically uploaded in PHP

I've been trying to automatically post data using JavaScript and retrieve it in a PHP file. However, I am facing an issue where the PHP file is not able to retrieve the data. I have set up an automatic form that takes input from another form and send ...

javascriptphphtml

Utilize CSS to incorporate special characters as list markers

Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...

htmlcsshtml-lists

Safari browser: Navigate with rtl/lrt direction

I created a webpage with right to left (rtl) direction. Below is the html tag I used: <html dir="rtl"> However, I needed two parts of the webpage to be written from left to right (ltr), so I added the dir attribute to this div: <div dir="ltr"&g ...

htmlcssright-to-leftbidi

Increase the value by one of the number enclosed in the <h3> element

I have a variable number of <h3> tags with the same class .love_nummer <h3 class="love_nummer">1</h3> Each of these tags contains a number, and alongside each .love_nummer tag is another tag with the class .give_love <h3 class="give ...

jqueryhtmlnumbers

The hover dropdown remains active even after the mouse has left

I've created a script for displaying a dropdown menu on small screens with a click (or tap on mobile), but I want it to change to hover when the screen size is larger. Here's my code: $(document).ready(function() { var open = false; ...

javascriptjquerycss

Tips for adjusting the width of a table

add your image description hereImagine a scenario where there is a table featuring two columns. <table> <tr><td>Email</td> <td></td></tr> <tr><td>Full name</td> <td></td></tr> ...

htmlcss

Customized input field design for a discussion board platform

I am in the process of creating a forum-style website and I am in search of a unique open source HTML template that includes an editable text box where users can input their posts, similar to what is seen when posting a question or answer. I believe there ...

javascriptjqueryhtml

Is there a way to modify CSS styles for a child tag element after hovering over its parent?

Here are my HTML code segments: <div class="div-builder"> <div> <a href="#"> <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo"> </a> <h3>Title</h3> < ...

jqueryhtmlcsshoverclick

I'm currently developing a Chrome application specifically designed for editing plain text. To achieve this, I am utilizing the <textarea> element. However, the app will not expand to full screen

Currently, I am in the process of developing a Chrome app and have implemented CSS from a previous post. The main issue I am facing is with the textarea element that I am using. I am open to exploring alternative solutions to achieve the desired outcome. S ...

htmlcssjsongoogle-chrome-app

Tips for adjusting content that is 900px wide to fit properly on a mobile screen while maintaining its original width

https://i.stack.imgur.com/JELN5.png Despite trying various meta tag variations, I am struggling to get this image properly scaled and displayed in React.js. Any suggestions on how to resolve this issue would be greatly appreciated. ...

cssreactjs

What is the method to modify the text color of an <option> in a <select> tag?

I am attempting to change the color of only the text "select one option" to grey, but I am having trouble making it work. Here is my code: .grey_color { color: #ccc; font-size: 14px; } <select id="select"> <option selected="selected"> ...

htmlcss

Is it possible for a div with fixed position to still have scrolling functionality

My fixed positioned div (#stoerer) appears to be moving while scrolling, although it is just an optical illusion. Check out this visual explanation: view gif for clarification Below is the code snippet in question: <div id="stoerer"> <button ...

javascriptjqueryhtmlcsssass

JQuery method for altering currentTime's format

I am attempting to showcase the current time and duration of my videos on my website using the format 00:00, but I am having some difficulty... myVideo.on('timeupdate', function() { $('.current').text(myVideo[0].currentTime); $ ...

jqueryhtml

Javascript's second element does not trigger a click event with similar behavior

I'm currently facing an issue with displaying and hiding notification elements based on user interaction. My goal is to have multiple popup elements appear when the page loads. Then, when a user clicks the ".alert-close" element within one of the popu ...

javascriptjqueryhtmlcss

Tips for creating a responsive fixed div/nav that adjusts its size based on the container it is placed within

Just starting out in web development and struggling with this issue. Any assistance would be much appreciated! When resizing the window, the fixed div moves outside of its container instead of resizing. The navigation bar on the website I'm working o ...

javascriptjqueryhtmlcssfixed

Should the potential benefits of implementing Responsive Design in IE8 be taken into account in 2013?

It seems that there are still questions lingering about how to make responsive design compatible with outdated browsers like IE8 or even the dreaded IE7. Personally, I question the need for implementing responsive design specifically for IE8, considering ...

cssinternet-explorer-8responsive-designpolyfills

Utilizing Images as Backgrounds in JSP

Looking for assistance with adding a background image in a JSP file without overlapping the navigation bar? Check out my code below: <jsp:include page="index_header.jsp"></jsp:include> <div class="container"> <div style=&ap ...

htmljsp

Is there a way to manipulate HTML elements on a webpage using Swift and Xcode?

Is it feasible to manipulate HTML elements on a website from an iOS application? For instance, displaying www.google.com using a UIWebView. I am interested in achieving the following, if this idea/concept is doable: Detecting whether the user has input ...

htmliosswiftuiwebview