Cannot Figure out how to align things to Center

HTML-CSS
1

I am extremely frustrated. I cannot understand what the heck is going on as far as trying to center images. No matter what I do it only moves the images a little bit to one side, I am at a loss here. I have three images I want placed horizontally next to each other, and I want them to be centered to the middle of the page, that is all. I have no idea why it is so difficult.

I am also unable to size my images veritcally, any help is appreciated. My images are going horizontal and vertical also even when I just change the names of the row and column, no idea why that is either?

<div class="row">

    <div class="column">
  <img src="Images\TheoSleepingWithZoe2.jpg" alt="A Toddler Cuddling With a Lab" style="width:75%">
    </div>

    <div class="column">
  <img src="Images\ZoeLayingWithHope.jpg"    alt="A Toddler Cuddling With a Lab" style="width:75%">
    </div>

    <div class="column">
  <img src="Images\TheoLayingWithZoe.jpg"    alt="A Toddler Cuddling With a Lab" style="width:75%">
    </div>

</div>

.row {
  height: 500px;
  width: 100%;
  display: flex;
  text-align: center;

}
.column {
  height: 50%;
  width: 50%
  text-align: center;
}
2

u using bootstrap

also you did not end with a “;” on width on .column

u simply add class “text-center”

3

I am just using HTML and CSS right now. I want to get this down before I go into the other parts of the curriculum. Bootstrap is part of CSS right?

4

Is there a way to center this with flex, HTML, or another simple CSS command for my external CCS style sheet?

5

oh sorry. disregard bootstrap

i think your code is correct
Imgur

u can see images are centered

u just forgot to add a semi-colon somewhere. don’t forget that

or are you referring to vertically centering it as well?

in that case, i usually do it manually by adding an inner div to the column divs and add padding-top or margin to it and adjust accordingly

like so:

<div class="column"><div class=inner-column-div>
  <img src="Images\TheoSleepingWithZoe2.jpg" alt="A Toddler Cuddling With a Lab" style="width:75%"></div>
    </div>

.inner-column-div {
    margin-top: 10%;
}

Imgur

6

bootstrap is a CSS library, it is powerful but means learning a whole bunch of different things
in FCC you learn bootstrap in the third certification, “Front-End Libraries and Frameworks”

7

Thank you for reply. What is throwing me off is understanding the ‘Block’ dimensions and where these blocks go by default on the page. I also was thrown off by having the images put vertically by default (because blocks are put vertically).

What I figured out is that in the parent element, I put 'text-align: center; , then in the child element I put ‘display: inline-block’. This takes the ‘vertical blocks’ and centered them (parent element) because the inline-element allows elements to go ‘In-Line’. Am I understanding this correctly?

Then I didn’t know I could edit the size of an image directly in CSS. So my <img src=" " could be linked to CSS under 'img { }. However, I got confused again by what size I put the image because I didn’t understand the size of the CONTAINER that my images were put into. Then it dawned on me that has been my problem all along.

First, I don’t know the shape or size of the ‘container’ that I am working on (which is why I didn’t know hot to edit the size of the image directly in CSS). Secondly, I didn’t know how to change the size of the images inside of the container. So I created a container by specifying the height and width in the child element because I only used the parent one to center. I put 200px for each. Then I set the width and heigth of the image to 100% and BOOM it worked.

This stuff is CONFUSING!!!

Does anyone have any advice on how to visualize or understand this stuff easier? I spent over three hours trying to figure this one thing out -Frowns-.

8

text-align aligns text in an element horizontally. You’re getting alignment here almost accidentally, due to images being inline elements and being treated a text.

.row {
  height: 500px;
  /* divs are block elements, already have width 100% */
  display: flex;
  /* stretch the columns to the full height: */
  align-items: stretch;
  flex-wrap: nowrap;
}

.column {
  /* equalise the widths of the columns: */
  flex: 1;
  /* make each column a flex container as well: */
  display: flex;
  /* vertically and horizontally centre the child: */
  justify-content: center;
  align-items: center;
}