Struggling to align your image properly?

My attempt to center the image "Logo_Home.svg" on my page has failed, as it is currently positioned in the top left corner. Can anyone help me identify what I am doing wrong and guide me in the right direction?

Thank you.

EDIT 1

I realized that I forgot to add a class to the image tag, but even after adding it, the image is only centered horizontally. Is there a way to also center it vertically?

EDIT 2

This is an example of the desired outcome: https://i.stack.imgur.com/KnjTC.png

body {
  margin: 0;
  background-image: url(http://pa2.site.com/IMAGES/Background.svg);
  background-repeat: repeat;
}

li {
  float: right;
  list-style-type: none;
  border: 2px solid #2f8fcb;
  border-radius: 10px;
  background-color: #2f8fcb;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  width: 200px;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-right: 40px;
  margin-top: 40px;
}

ul {
  margin: 0;
}

img.center {
  display: block;
  margin: 0 auto;
}
<ul>
  <li>REGISTER</li>
  <li>LOGIN</li>
</ul>

<img src="http://pa2.site.com/IMAGES/Logo_Home.svg" class="center">

htmlcsssvg

Answer №1

body {
  margin: 0;
  background-image: url(http://pa2.sulmaxcp.com/IMAGES/Background.svg);
  background-repeat: repeat;
}

li {
  float: right;
  list-style-type: none;
  border: 2px solid #2f8fcb;
  border-radius: 10px;
  background-color: #2f8fcb;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  width: 200px;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-right: 40px;
  margin-top: 40px;
}

ul {
  margin: 0;
}

.contain {
  padding-top:20%;
}
img.center{
  display:block;
  margin: 0 auto;
}
 
<ul>
  <li>REGISTER</li>
  <li>LOGIN</li>
</ul>

<div class="contain">
<img src="http://pa2.sulmaxcp.com/IMAGES/Logo_Home.svg" class="center">
</div>

To vertically center your image, I enclosed it in a div and added margin-top.

Answer №2

Here is the solution that should meet your needs:

nav {
  float: left;
  margin: 10px;
}

img.align-center {
  clear: both;
  display: inline-block;
  margin: 0 auto;
}

View Demo

Answer №3

In my quest to find a solution, I turned to using flex-box and it did the job perfectly. I began by enclosing the image in a div labeled center. Then, I utilized this CSS code to center the content:

div.center{
  display: flex;
  align-items:center;
  justify-content:center;
  height:70vh;
  width:90vw;
}

Feel free to check out this jsfiddle link.

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

Angular text input with customizable placeholder text and embedded icon

Hey there, I'm looking to create a unique custom textbox that includes a text placeholder and a help icon that will display useful information in a popover. https://i.sstatic.net/Zh0IK.png When typing into the input, the textbox should have a specif ...

htmlcssangularbootstrap-4

The default theme has not been specified in Tailwind CSS

During my recent project, I utilized React, Next.js in combination with Tailwind CSS. In this project, I delved into styling customization by implementing react-slick for a specialized slider. To achieve the desired aesthetic, I made modifications to the r ...

javascriptcssreactjstailwind-cssreact-slick

Maintain the selected bootstrap tab even after the page is refreshed, even when the content is loaded dynamically

I am currently facing an issue with loading tabs using Angular. Whenever a tab is clicked, the id is saved to localStorage. Now, I want to programmatically click on the same tab using jQuery when the page refreshes. However, since the DOM element for the ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Styling the content within Template Strings is not supported by VSCode

Recently, I've noticed that there are two scenarios in which my VSCode doesn't properly style the content within my template strings. One is when I'm writing CSS in a JavaScript file, and the other is when I'm fetching data from GraphQL ...

javascriptcssreactjsvisual-studio-codegraphql

Modifying text on input buttons using Javascript

Including product names, text forms, and buttons on a webpage is essential for showcasing products effectively. Each product is assigned an ID such as p1, p2, etc., while the input types are identified by i1, i2, etc. When users enter information into the ...

javascripthtmleventsonclickbuttonclick

Tips for aligning a div containing an image in the center of another div

Trying to perfectly center an image inside a div both vertically and horizontally using the display inline-block property. HTML <div class="center-wrapper"> <div class="image-holder"> <img src="picture.jpeg" alt="Centered Image"> ...

htmlcss

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

javascriptjqueryhtmlinput

How can I distinguish the search results from the while loop section at the bottom of the page?

One issue here is the footer's margin position being influenced by the results of the while loop. To see the problem more clearly, visit this link: Below is the code snippet: <div id="print_output1"> <?php $co ...

phphtmlcssfooter

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

javascripthtmlcsscss-variables

Troubleshooting: Fixed Header Issue in HTML5 Responsive Web Design

My goal is to develop a simple HTML5 responsive web layout with a fixed header. I am striving to maintain clean HTML and CSS code while adhering to best practices. The header is designed to have a maximum width of 980 pixels, with a blue background that ex ...

htmlcss

Using WebDriver Selenium to choose an element within a table following another element

The webpage features a user details table with a functionality to delete users. To remove a user, I must select the row based on the username and then click the "Delete" button. The structure of the HTML table is as follows: <table id="tblUsersGrid" ce ...

cssseleniumxpathselenium-webdriver

Using a for loop, how can the property value be set in another object?

One challenge that I am facing is setting object property values. The object in question looks like this: const newPlan = { name: '', description: '', number: '', monday: { breakfast: '', ...

javascripthtmlobjectfor-loopdom

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

I have a simple Single Page Website built with Angular. I utilized ng-repeat to generate content on the main page, where each item is an image. I am looking to create an alternate view for each image to display more details. I have implemented this feature ...

javascripthtmlcssangularjs

steps for applying a vertical-align:bottom with an additional 10px offset

Can you show me how to have two inline-blocks with the second one positioned 10 pixels up from the bottom? I'm not sure how to do this. Here is a snippet of my code: .test1{ display:inline-block; border: 1px solid red; min-height: 50px; } .tes ...

css

Can you explain the function of the forward slash in the HTML img tag?

Currently, I am in the process of learning html/css by following the tutorial provided by W3Schools.com. The part of the code that is causing me some difficulty can be found at http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align Specific ...

htmlcssimage

Shift a Div to the left prior to stretching it out

I am trying to achieve a smooth leftward movement and expansion animation for a div. Currently, I am experimenting with class switching on click events to transition between the desired states. However, I am facing difficulty in making the element first mo ...

javascriptjqueryhtmlcss

Text directly in the middle

Explanation In an attempt to replicate the "middle centered text" feature, such as "Responsive Front-end Development," on this website, I am currently exploring various methods. As a newcomer to web development, I have searched for templates to provide me ...

htmlcsstwitter-bootstrap

Choose an Option that Does Not Allow PHP as a Value

Currently, I am retrieving a value from the database where interval days are set to 5. However, when I display it, it always shows '0' within my option form. <?php $interval_day = $this->crud_model->auto_order_interval_day(); ?> ...

phphtml

What is the method for creating text outlines using html5/css3?

I have been experimenting with using shadows to outline text, which is a solution I came across in various Stack Overflow threads. However, support for text-outline and text-stroke features is currently limited. I am encountering an unusual issue with on ...

htmloutlinestrokecss

Can the footer be adjusted to be full width only?

Is there a way to stretch only the footer on a blogger simple template to full width without altering other elements? I have looked into similar topics, but they mainly focus on WordPress or involve changing multiple elements, which is not suitable for my ...

htmlcssfooterblogger