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

Checkboxes within Angular's reactive forms are a powerful tool for creating dynamic user

Currently, I am working on a contact form that includes checkboxes for users to select multiple options, with the requirement of selecting at least one box. My challenge lies in figuring out how to pass all the selected checkboxes' data to an API usin ...

htmlarraysangulartypescriptforms

The TextField component in MUIv5 is showing some frustrating white space in the corners

I've integrated the MaterialUI_v5 library and included a TextField component within a Paper component. The background of the Paper component has been customized to appear in a shade of green. For the Textfield component, I have applied a styling tha ...

cssreactjsmaterial-ui

How to position slides in the center using react-slick

I'm having difficulty achieving vertical centering for an image in a react-slick carousel implementation. The issue can be seen here. https://codesandbox.io/s/react-slick-playground-o7dhn Here are the problems identified: Images are not centered: ...

htmlcssreactjsslick.jsreact-slick

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

Converting XML hierarchy into a flat HTML table using XSLT

Looking for a way to transform hierarchical XML into an HTML table? Here's the challenge: <node text="a" value="1"> <node text="gga" value="5"> <node text="dh" value="9"> <node text="tyfg" value="4"> < ...

htmlxmlxslt

Comparing iPad and Desktop Devices

Working on the responsive site sandbox.mercomcorp.com, I encountered an issue where the CSS meant for an iPad device is affecting the desktop CSS. Shouldn't the iPad have its own separate media query from the desktop? Here's a snippet of the CSS: ...

ioscssipadresponsive-design

Issues with the execution of Jquery function

Hey guys, take a look at my code: //Additional Jquery codes // display_popup_crop : revealing the crop popup function display_popup_crop(link) { alert("show_popup_crop function is triggered!"); // changing the photo source $('#cropbox&a ...

javascriptphpjqueryhtmljcrop

The class "slick" in <col class="slick"> does not add any styling or effects

My interpretation of the col element is that it can be used to assign a class to all elements in a column of a table. However, I am experiencing difficulties with this approach. While I am able to apply the class to individual td elements, I am looking for ...

htmlcsshtml-tablecol

Having trouble getting the hover effect to change the colors of CSS borders

I am experiencing difficulty in changing the background color of the 'About' button to yellow and the border color to blue when it is hovered over. Currently, only a small rectangle around the text changes to yellow on hover and I cannot figure o ...

htmlcss

Text alignment from the lower edge

Imagine having a title inside an image, positioned near the bottom with a negative margin-top. The issue arises when the text orientation expands from top to bottom as more content is added. Is there a way to reverse this, so that the text div grows toward ...

htmlcss

The type 'string' cannot be assigned to type 'ImageSourcePropType'

Context Attempting to utilize a SVG component in React Native with the xlinkHref property within an Image tag. The SVG file was converted into a React Native Component (TSX) using the tool provided at . While simple SVG icons have been successfully used be ...

typescriptreact-nativesvg

The CSS Grid container fails to resize based on the content inside

I am facing an issue with the grid element inside a parent container with display: grid;. The parent container has a maximum size and allows scrolling for the grid if necessary. The problem is that the grid element does not expand to fit its children. Whe ...

csscss-grid

Error: Incorrect data input in Django calendar form

I have a DateForm class defined in my form.py file: class DateForm(forms.Form): date = forms.DateTimeField( input_formats=['%m/%d/%Y %H:%M'], widget=forms.DateTimeInput(attrs={ 'class': 'form-control dateti ...

htmldjango

Switching Column Content with jQuery on Mobile Devices

In my design, I have a dynamic two-column layout created using Twitter Bootstrap 3. The layout switches between image-text and text-image alignment for each row. The goal is to adjust it for smaller screens (less than 768px) so that rows with images on th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Opening Tags in Selenium for HTML

Is it possible for Selenium with XPath to properly work with HTML that is not in the form of XML, and contains open tags like <col> and <input>? I'm curious if anyone can confirm this. I ask because our automation testing team has noticed ...

htmlxpathseleniumxhtml

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

Fetch HTML content from a local file using Vue

I am currently searching for a method to import HTML content from a file located at /src/activities/0/2/content.html The specific numbers in the path are interchangeable variables. My goal is to achieve something along the lines of mounted(){ this ...

htmlvue.jswebpackvuejs2vue-cli

How to export HTML table information to Excel using JQuery and display a Save As dialog box

This script has been an absolute lifesaver for my web application. Huge thanks to sampopes for providing the solution on this specific thread. function exportToExcel() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6& ...

javascriptjqueryhtmlmysqlexcel

Guide to implementing onhashchange with dynamic elements

Hey there! I've encountered a problem with two select boxes on my webpage, each in different anchors (one on the page, the other in an iframe). What I'm trying to achieve is for the code to recognize which anchor it's in and then pass the se ...

javascriptjqueryhtmlurlhashchange

Revamped Web Presentation: The Dynamic Blend

I'm struggling to arrange a section in the same way as shown in this image. https://i.stack.imgur.com/QVDHn.png I have been using bootstrap 4 and have experimented with rows and columns, but haven't been able to achieve the desired layout. Curr ...

htmltwitter-bootstrapbootstrap-4layouthtml-lists