Aligning Three Images Horizontally (Can only get them vertical) - html

Question

I seem to be really missing something about how to line three images horizontally in one block across the screen with CSS. I seem to only be able to line them up in one long line down the page (when I really want them to go across the screen in a horizontal line). Where am I doing wrong with my div? Or maybe I am being led astray in CSS? Any ideas? Thank you so much.
.taco_container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img src="images/tacoone.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_2.html">
<img src="images/tacotwo.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img src="images/tacothree.png">
</a>
</div>
</div>

Answer 1

your solution may be: demo
i added only class :"img_class" and remove inline style sheet
.taco_container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
.img_class{width:33%;
float:left;
height:auto;
}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img class="img_class" src="images/tacoone.png">
</a>
</div>
<div class="taco">
<a href ="tacogame_choose_2.html">
<img class="img_class" src="images/tacotwo.png" >
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img class="img_class" src="images/tacothree.png">
</a>
</div>
</div>

Answer 2

You have to display items as inline-block and set text-align: center.
.taco_container {
width: 100%;
}
.taco {
width: 33%;
display: inline-block;
text-align: center;
}
Fiddle: http://jsfiddle.net/2xo1gr6w/

Answer 3

Check here an example also with display:inline : http://jsfiddle.net/y1tuLyzg/
#taco_container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
padding:0;
}
#taco_container .taco {
display:inline-block;
width:33%;
height:100px;
}
#taco_container .taco img {
max-width:100%;
margin:0;
padding:0;
}

Answer 4

Almost! You just needed to add display:inline-block; to .taco:
.taco {
display:inline-block;
}
EXAMPLE (excuse the kittens they are an example)
Also taco_container has a width of 300px and each image has a width of 304px, so you would need to increase the width of taco_container accordingly to fit with the images.

Answer 5

.taco_container {
width: 300px; <!-- wrapping div is smaller than the divs you trying to put in it-->
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img src="images/tacoone.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_2.html">
<img src="images/tacotwo.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img src="images/tacothree.png">
</a>
</div>
</div>
Your wrapping div or container is 300px yet you are trying to put 3 divs that are 304px wide into it.

Answer 6

.taco_container {
width: 100%;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
.taco { display: inline-block;
width:30%;}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img src="images/tacoone.png" style="height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_2.html">
<img src="images/tacotwo.png" style="height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img src="images/tacothree.png">
</a>
</div>
</div>