Image won't center inside Article and Aside for some reason - html

Question

I am trying to center images inside my <article> and <aside>, and i am not sure what's wrong with the code. I tried to make some adjustments using article#tablet but no success. Now the images lays on the left, no matter what...if i inspect the item and give it a margin or padding it will react. But can not center it.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://via.placeholder.com/150x150" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Any help i would appreciate. Thank you

Answer 1

You can make use of flexbox in this situation. According to your need, just use the align-items and justify-content properly.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
display: flex;
align-items: center;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
.img-wrapper img {
width: 50px;
height: 50px;
}
.img-wrapper {
display: inline-flex;
align-items: center; /**Vertical */
justify-content: center; /**Horizontal */
height: 100%;
flex: 1;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet" class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>

Answer 2

Your CSS does not have any styles for images.
To center the image in your you have to select it and apply styles to it, for example an auto margin and display: block:
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
/* Added this */
article img,
aside img {
display: block;
margin: 0 auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="./img/hand_ipad.png" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://picsum.photos/200/300" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://picsum.photos/300/300" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>

Answer 3

You want to center the image inside the <aside> and <article> right ?
Just add property : text-align : center in the aside and article, the images inside them will be centered.
Checkout in codepen for more detail
https://codepen.io/anon/pen/PddMYZ
Or only necessary code here (The css file) :
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
text-align : center;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
aside{
text-align : center;
}

Answer 4

This is another simple method.
I have wrapped image in a div and added single css line for that div.
section {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
width: 50%;
background-color: #A2B2C1;
}
aside {
float: right;
width: 50%;
background-color: #C3D7DF;
}
/*css which I have added*/
.img-wrapper {
text-align: center;
}
<section>
<article>
<h2>Article Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</article>
<aside>
<h2>Aside Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</aside>
</section>