Aligning image vertically

I'm working on aligning an image vertically in my header. Currently, it's horizontally centered.

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  text-align: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
}
<div class="container">
  <header>
    <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
  </header>
</div>

I've tried searching for a solution and was able to get the image aligned vertically in the center, but then I couldn't get it horizontally aligned with text-align:

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  text-align: center;
  display: flex;
  align-items: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
}
<div class="container">
  <header>
    <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
  </header>
</div>

I am new to HTML+CSS. Any suggestions?

htmlcssalignment

Answer №1

When working with Flexbox, you have the option to include the property justify-content:center

This CSS-Tricks article provides excellent examples on how to center elements.

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
}
<div class="container">

  <header>
    <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
  </header>


</div>

Answer №2

For a quick center alignment on your flex container, just include 'justify-content: center' in the CSS.

header {

    background-color: blue;
    height: 118px;
    width: 1024px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{

    margin-left:auto;
    margin-right:auto;
    width: 1024px;

}
img { display:block }
<div class="container">

        <header>
            <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
        </header>


    </div>

Answer №3

Make sure to include justify-content: center; in the header styles.

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  text-align: center;
  display: flex;
  align-items: center;
}

I trust this advice will be beneficial for you.

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

Wordpress easily adjusts post alignments for a seamless display

Can anyone help me figure out how to properly align posts in Wordpress to match the example image attached? I've tried using inline-block or float with CSS/HTML, but the posts are not aligning correctly. I'm unsure of what this method is called s ...

phphtmlcsswordpressalignment

Creating an accessible order for the next and back buttons

Currently, I am working on designing the user interface for a checkout flow. Towards the end of the page, there are 3 buttons available - Next, Back, and Cancel. When viewed on a desktop, the button layout appears as follows: (Back) (Next) Cancel http ...

htmlcssaccessibility

What could be causing my page to appear differently in medium resolutions with Bootstrap 4?

When viewing my basic Bootstrap 4 webpage on a medium screen size, there appears to be a blank space on the right side. https://i.sstatic.net/ohV20.jpg Visit the page Thank you very much. ...

htmlcssbootstrap-4

Conceal a column within a nested HTML table

I am facing a challenge with a nested table column structure: My goal is to hide specific columns based on their index within the table. Can someone explain the concept behind achieving this? I am unsure of how to get started on this task. <table clas ...

javascriptjqueryhtml

Automatically adjust the top margin of the content section to accommodate a fixed header height

After extensive searching, I've come across various solutions but none of them seem to fit my needs. I am a beginner/amateur developer. The issue I am facing is with a fixed header that resizes when scrolling. I understand that by adding padding-top: ...

javascripthtmlcss

Automatically load content using AJAX when scrolling within a HTML5 segment

Recently, I've been developing a website that dynamically loads new content from a MySQL database as the user scrolls. However, I've encountered an issue where the new content is loaded even with minimal scrolling, rather than only when reaching ...

javascriptjquerycssajaxhtml

Ways to expand a Bootstrap input field by clicking on it:

I have successfully created a search bar in my navbar, but I am looking to add functionality that allows the input field to expand to its normal size when clicked. I believe this will require some JavaScript implementation, however, I am unsure how to proc ...

javascripthtmltwitter-bootstrap

Adding a scroll bar to a fixed container: tips and tricks

I am looking to implement a scrollbar in a fixed container for the cart products. The goal is to enable easy navigation through a large number of products added to the cart by scrolling within the container. Below is the HTML code snippet representing the ...

phphtmlcss

The concept of Border-Merging within Material Design Tables

Is there a way to implement the following border style in a Material Design Table: border-collapse: collapse; I tried adding a border to .mat-cell: .mat-cell { border: 1px solid; } However, in some instances, the border appears to be 2px. The reas ...

cssangularmaterial-design

motion graphic border not joining at the corner

Yesterday, my code was functioning perfectly. However, after making several revisions to include all animations and styles, I notice that the animated borders no longer connect at three corners. Can someone please assist in identifying what went wrong duri ...

htmlcss

My custom styles no longer seem to be applying after upgrading Angular Material from version 14 to 15. What could be causing this issue

Having some challenges with the migration from Angular 14 to Angular 15 when it comes to overriding material UI elements and themes. Looking for blog posts or documentation that can provide guidance on how to smoothly transition. Specifically, experiencin ...

cssangularangular-materialangular15angular-migration

Use ngFor to align items to the left in your design

I am working on a div element where I need to dynamically add inputs that should form a number with a specific format. To ensure the inputs start from the left, I have applied the justify-content-end class. HTML: <div class='row justify-content-end ...

htmlcssangularbootstrap-4ngfor

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Is it possible to create a radial grouped circle using d3.js, similar to the image below: I have written some code as shown below. However, I am facing challenges in connecting every circle with a curved line and displaying a tooltip when hovering over a ...

javascriptcssd3.jssvg

What is the best way to obtain a direct file link from a server URL using JavaScript?

After acquiring a file located at /home/johndoe/index.html, I am utilizing a tool like XAMPP to host, with the folder /home being hosted on localhost. The variables in play are as follows: $server_addr = "localhost"; $server_root = "/home"; $file_dir = " ...

javascriptphphtmlajax

What is the best way to ensure the box div is centered responsively?

Here is the code for my HTML file: body { background-color: rgb(231, 59, 59); font-family: "Alata"; font-size: 20px; margin: 30px; } h1 { margin-top: 100px; color: #202124; text-align: center; } .box { width: 1000px; } input { positi ...

htmlcssweb-deploymentgoogle-web-designer

Modify vanilla JavaScript carousel for compatibility with Internet Explorer

I am currently in the process of creating a website that incorporates a carousel similar to the one found at the following link: https://codepen.io/queflojera/pen/RwwLbEY?editors=1010 At the moment, the carousel functions smoothly on opera, chrome, edge ...

javascripthtmlcss

What is the best way to incorporate a background image in a Bootstrap tooltip?

I'm having trouble displaying an element with a background-image property within a Bootstrap tooltip. The image is not showing up as expected. <div class="big-panel"> <a href="#" data-bs-toggle="tooltip" data ...

javascripthtmlcsstooltipbackground-image

What are the steps to create a CSS 'shell' design?

How can I create an image displayed as a circle with border-radius:50%, along with some text on the same line that has a set width and background color? I want to achieve this without hard coding values. What is the best approach to do this? Check out the ...

htmlcsscss-shapes

The state of XMLHttpRequest always remains in a perpetual state of progress, never

I have come across an MVC Core application. One of the methods in this application currently has the following structure: public IActionResult Call(string call) { Response.ContentType = "text/plain"; return Ok(call); } In addi ...

javascripthtmlajaxmodel-view-controller

How can I extract the document that is generated when a button is clicked using BeautifulSoup?

Trying to utilize BeautifulSoup for scraping my banking website to automatically retrieve the generated PDF from monthly purchases. Successfully logging in and reaching the page with the button, but the button does not seem to be a simple link - possibly a ...

pythonhtmlweb-scrapingbeautifulsoup