What is the best way to align my text with my picture?

Looking for a way to adjust the placement of text next to an image? Checkout this code snippet:

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

Want to center the text beside the image in CSS?

CSS:

header{
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1{
 color: white;
padding: 0px 190px;
font-size: 17px;
vertical-align: middle;
line-height: 20px;
}
.logopng{
width: 35px;
height: 35px;
}

HTML:

 <header>
 <div class="header-1">
 <img src="http://i.imgur.com/cGlBmw7.png" class="logopng">
 Rocket League Prices
 </div>
 </header>

UPDATE: added vertical-align:middle to the image class

Answer №1

To easily center elements, just apply the following CSS properties to the parent element: display: flex and align-items: center.

nav {
  padding: 15px;
  background-color: #2c3e50;
  color: white;
}
.navbar {
  font-size: 16px;
  display: flex;
  align-items: center;
}
.logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
<nav>
  <div class="navbar">
    <img src="http://i.imgur.com/cGlBmw7.png" class="logo">Website Navigation
  </div>
</nav>

Answer №2

If you wish to utilize the flexbox feature in CSS3, simply include the following lines of code:

display:flex;
align-items:center;
justify-content:center;

Add these to your .header-1 class to see it in action. I have included a sample snippet below for reference.

header{
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1{
 color: white;
  font-size: 17px;
  display:flex;
 align-items:center;
  justify-content:center;
}
.logopng{
width: 35px;
height: 35px;
  margin-right:10px;
}
<header>
 <div class="header-1">
 <img src="http://i.imgur.com/cGlBmw7.png" class="logopng">
 Rocket League Prices
 </div>
 </header>

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

Sophisticated filter - Conceal Ancestry

Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...

An error will occur if you try to use $.ajax inside a function

I am facing an issue with a function that utilizes jquery's ajax to check an API for the success status of a variable. The goal is to return true if the "success" variable is true and false if it is false. Below is the code snippet: function checkLo ...

Dynamic positioning of a div using Jquery's scrollTop functionality

I need assistance with a layout for my two-column webpage. The first column (id="#list") consists of a list of divs that can grow in length as content is added. The second column (id="#expand") displays an expanded view when a div in the left column is cli ...

Error Encountered While Building Flask Application

Whenever I try to submit the form, an error pops up and I can't see the flash message even though it's added to my database: werkzeug.routing.BuildError BuildError: ('/contacts', {}, None) Here are my methods: @app.route('/conta ...

Adjusting the slideshow to perfectly match the screen size

Currently, I am working on a front-end website project utilizing bootstrap. A slideshow has been implemented; however, it is not properly fitting the screen dimensions. The images were inserted directly into the HTML and not within the CSS. Below is the co ...

Selenium WebDriver: The challenge of using visibilityOfElementLocated when the element is not actually visible

I've encountered an issue with the Firefox Webdriver where it fails to accurately determine if an element is visible. Here is the code I am using, which incorrectly indicates that the element is visible: wait.ignoring(UnhandledAlertException.class).u ...

Vue.js: Redundant CSS classes (CSS components) are created when importing the same CSS file

I am currently developing an App using Vue.js and CSS Components. Within my Vue components, I have noticed that some share similar styling. In my Hello.vue component: <template> <div :class="$style.title">Hello, World</div> </templ ...

automatically generate a Panel-Body with content

Hey there, I'm facing a problem. Here's the picture: https://i.sstatic.net/1o1ld.jpg Any ideas on how to make the size fit the text? Here's the code: <div class="panel panel-default"> <div class="panel-heading"> <strong>A ...

Can someone provide details on how to reset the auto-scroll timer on my content slideshow after each click?

I'm currently building a content slideshow and you can find it at Below is the javascript code: jQuery(document).ready(function($) { setInterval(function() { moveRight(); }, 8000); var slideCount = $('#slider-isp ul li').length; ...

The HTML return function failed to execute properly when I included the return false statement

Having an issue with submitting the username and email to a file named welcome.php. It was functioning properly until I added a return false statement to prevent registration errors. Despite meeting all the requirements I've specified, it's not r ...

What is the best way to ensure that this <span> maintains a consistent width, no matter what content is placed inside

So here's the deal, I've got some dynamically generated html going on where I'm assigning 1-6 scaled svgs as children of a . The span is inline with 2 other spans to give it that nice layout: https://i.sstatic.net/mySYe.png I want these "b ...

Display a full-width card beneath each small card in every row using CSS

In a scenario where I have designed a layout consisting of 3 column/row cards across multiple rows. Each card displays basic information, and when a user clicks on any specific card, a full-width card below that row will display more detailed information. ...

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

libxml2 - deleting a child node without affecting its grandchildren

I'm working with libxml2 to parse HTML content and need to remove specific formatting tags such as <center>, while retaining their content (e.g. a hyperlink). This requires removing particular child nodes from my xmlNodeSet, while preserving th ...

Styling a Form Submission with CSS

I am currently working on a website that contains the following PHP code: echo "<form action='choice.php' method='post'>"; echo "<input type='submit' name='choice' value='left' /> "; As I am i ...

Adjust the scrollTop of the tab-content when navigating between different tabs

When I scroll through the content of menu1 and then click on the menu2 tab, the content for the menu2 tab is displayed. However, I am facing an issue with changing the scroll position of the tab content so that it is visible from the top. I attempted to u ...

Chosen selection is yielding tag instead of text value

Having an issue with my bootstrap select element <select id="createAxiomSelect" class="form-select"> <option selected vale="true">True</option> <option value="false">False</ ...

Is it possible to incorporate multiple IDs into the changeImage function for a radio

I've encountered an issue with my function that changes images based on radio button selections. It works fine for one image slider, but now I want to make it available for a second slider. The problem is that when I use the radio buttons for the seco ...

jQuery fails to recognize response

Can anyone figure out why my alert isn't functioning correctly? <script type="text/javascript"> function SubmitForm(method) { var login = document.form.login.value; var password = document.form.password.value; ...

Displaying only the div after the link from a table where all divs are shown using jQuery

I'm struggling to figure out how to select the immediate div inside each td and properly load up the page. Each link seems to toggle every hidden div on the page! The table contains hundreds of rows, with each row featuring a visible part - a link - ...