Jump to content

How to center my images?

Recommended Posts

I am trying to center my images with a background object.


What is it I need to do?

#tooplate_middle { 	clear: both;	width: 880px;	height: 240px;	padding: 50px;	overflow: hidden;	background: url(../images/middle.png);}#mid_title { 	font-size: 30px; 	line-height: 38px; 	font-weight: 400; 	color: #fff; 	margin-bottom: 20px;  }@import url(http://fonts.googleapis.com/css?family=Varela+Round);html,body {  background: #333 url("http://codepen.io/images/classy_fabric.png");}.slides {  padding: 0;  width: 609px;  height: 220px;  display: block;  margin: 0 auto;  position: relative;}.slides * {  user-select: none;  -ms-user-select: none;  -moz-user-select: none;  -khtml-user-select: none;  -webkit-user-select: none;  -webkit-touch-callout: none;  }.slides input {  display: none;}.slide-container {  display: block;}.slide {  top: 0;  opacity: 0;  width: 609px;  height: 220px;  display: block;  position: absolute;  transform: scale(0);  transition: all .7s ease-in-out;}.slide img {  width: 100%;  height: 100%;}.nav label {  width: 200px;  height: 100%;  display: none;  position: absolute;  opacity: 0;  z-index: 9;  cursor: pointer;  transition: opacity .2s;  color: #FFF;  font-size: 156pt;  text-align: center;  line-height: 380px;  font-family: "Varela Round", sans-serif;  background-color: rgba(255, 255, 255, .3);  text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label {  opacity: 0.5;}.nav label:hover {  opacity: 1;}.nav .next {  right: 0;}input:checked + .slide-container .slide {  opacity: 1;  transform: scale(1);  transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label {  display: block;}.nav-dots {  width: 100%;  bottom: 9px;  height: 11px;  display: block;  position: absolute;  text-align: center;}.nav-dots .nav-dot {  top: -5px;  width: 11px;  height: 11px;  margin: 0 4px;  position: relative;  border-radius: 100%;  display: inline-block;  background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover {  cursor: pointer;  background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 {  background: rgba(0, 0, 0, 0.8);}#mid_left { 	float:left; 	width:400px; }#mid_slider { 	position:relative; 	float: right; 	width: 440px; 	height: 220px;	  }#tooplate_middle img { 	float: right; 	margin-left: 60px; }#mid_left p { 	margin-bottom: 30px; 	color: #fff; }

The image slider I wanted was more like the one at http://www.eaglegunusa.com/, but I couldn't find code on the net for it.

  • Like 1

Share this post

Link to post
Share on other sites

The validator reports 22 errors:



Most of them are serious structural error, plus you are using a very weak doctype and some errors are related to using non-xml formats in an XHTML page.


You should not expect CSS properties to be consistently applied when the structure is broken. So start by fixing the errors and then see how much of a problem (if any) that you still have.

Share this post

Link to post
Share on other sites
<center><img src="lalpicture.jpg" alt="what image shows" height="150" width="200"></center>

It is hard believe that anyone would still be suggesting something that is obsolete and has not been considered good practice since the last century. :glare:

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...