1210

Vertical and horizontal align of image [duplicate]

Question:

This question already has an answer here:

<ul><li> <a href="/questions/19461521/how-to-center-an-element-horizontally-and-vertically" dir="ltr" rel="nofollow">How to center an element horizontally and vertically?</a> <span class="question-originals-answer-count"> 13 answers </span> </li> </ul>

I have a placeholder (under construction) site which holds only one image with the logo. I horizontically aligned with margin: 0 auto. But how do I know additionally horizontal align the image. Or with one sentence: How do I fully centrate an image.

<a href="http://jsfiddle.net/egxa2/" rel="nofollow">Look here to see live: fiddle</a>

Regards, Bodo

EDIT: For 1:2 (height to width) images use:

#wrapper img { position: absolute; top: 50%; left: 50%; width: 799px; height: 404px; margin: -202px -399px 0; border: 1px solid black; }

like in the linked thread :)

thank you for the help

Answer1:

Urm.. Have you tried ?

<div class='placeholder'> <img src='../images/myimage'> </div>

And the css for that markup

.placeholder { position : absolute; top : 50%; left : 50%; width : 200px; /* Width of the image in question */ height : 200px;/* height of the image in question */ margin : -100px 0px 0px -100px; }

This should bring your image to the very center of the page.

Answer2:

This will do it

img#logo { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; }

<a href="http://jsfiddle.net/DxByM/" rel="nofollow">http://jsfiddle.net/DxByM/</a>

Answer3:

Have a div to hold the image with the following rules:

margin-left: auto; margin-right: auto; margin-top:200px; <!-- Will depend on your image --> width:[your-image-width]px;

Will center your image

Recommend

  • How to create an HTML link in Dart?
  • ASP.NET MVC Drop Down List
  • Regular Expression to identify a Guid followed by a number
  • What is the difference between CacheStoreMode USE and REFRESH
  • How do one only submit click event (div), when using jquery live function?
  • OAuth2 flow for mobile app
  • Convert a 12 hour time format to 24 hour time format (keeping record of the day) in python
  • TCPDF's getNumLines() is sometimes wrong
  • Play Framework nested form errors missing
  • Packet modification with netfilter queue?
  • Multibinding Multiselection ListView
  • PHP file_exists() anomaly
  • Nodejs bluebird promise fails while processing image
  • How to get Fully qualified domain name in unix
  • IOS > Open URL in Safari with POST
  • Adding independent aspx/asmx pages into DotNetNuke
  • Passing information to server-side function in a Google Docs Add On
  • my tic-tac-toe program in matlab does not work [closed]
  • How to apply a custom handlers to only specific folder
  • Streaming screenshots over WebRTC as a video stream from iOS
  • chrome video src change not working
  • Lock Horizontal View
  • Hibernate to update table schema
  • Floated image with variable width and heading with background image
  • Moving Android View and preventing onDraw to be called over and over again
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Jackson Parser: ignore deserializing for type mismatch
  • HTTP/2 streams vs HTTP/1.1 connections
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL ES texture problem, 4 duplicate columns and horizontal lines (Android)
  • Change multiple background-images with jQuery
  • How to install a .deb file on a jailbroken iphone programmatically?
  • Syntax for setting draggablecursor property in google maps api
  • Trying to switch camera back to front but getting exception
  • How to make Safari send if-modified-since header?
  • GridView Sorting works once only
  • How to get icons for entities from eclipse?
  • How to include full .NET prerequisite for Wix Burn installer
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • python draw pie shapes with colour filled