How to center my images?

[BamBamm]

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

http://www.appleblossomentertainment.com

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.

[COBOLdinosaur]

The validator reports 22 errors:

https://validator.w3.org/check?uri=http%3A%2F%2Fwww.appleblossomentertainment.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

 

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.

[BamBamm]

Screw it, I guess I have to pay someone.

Thanks for letting me know.

Edited November 3, 2015 by BamBamm

[dauruk0512]

just choose some one here to fixed your problem

[marryjhonson]

<center><img src="lalpicture.jpg" alt="what image shows" height="150" width="200"></center>

[dsonesuk]

<center><img src="lalpicture.jpg" alt="what image shows" height="150" width="200"></center>

Validate that solution and prepare thy self for the truth.

[COBOLdinosaur]

<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.