Question:
HELP!!! How do I align the two texts and pictures so that they will be in the same row? - HTML & CSS
Repl link:
code snippet
``` The whole code? idk- Using Flexbox:
- First, create a container
<div>element to hold the texts and pictures. - Apply
display: flex;to the container element to enable flexbox. - By default, flexbox places all the items in a row. If there are more items than can fit in a row, they will wrap to the next row.
- To align the items vertically, use
align-items: center;oralign-items: baseline;. - To align the items horizontally, use
justify-content: space-between;or any other desired value.
Here’s an example code:
html
<div class="container">
<p>Some text</p>
<img src="example.jpg" alt="Example">
</div>
css
.container {
display: flex;
align-items: center;
justify-content: space-between;
}
- Using CSS Grid:
- Create a container
<div>element to hold the texts and pictures. - Apply
display: grid;to the container element to enable CSS Grid. - Set the
grid-template-columnsproperty to specify the width of each column. - Place each text or picture element inside the container and they will be automatically placed in the specified grid positions.
html:
<div class="container">
<p class="text">Some text</p>
<img src="example.jpg" alt="Example">
</div>
css
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* adjust the number of columns as needed */
}
There are many other ways to do this. These are just a few examples
1 Like
You can just do flex-direction: row; though.
3 Likes
What do you mean exactly? Apply display: flex; and flex-direction: row; to the parent container.
You can also just use display: inline-block
1 Like
I use Flex for the elements I need to be lined up. It is very very easy to use!
2 Likes
I’ve used display:inline-block so many times. It usually works, but I’ve been starting to use flexbox as I’ve started to understand it a little more.
Thanks so much for all the input!! I can now get them on the same row, but there is an unwanted space between the two boxes.
Does anyone know how to fix this.
Again, thank you all so much!
You can easily fix this by:
.container > * {
margin-left: 0;
margin-right: 0;
}
What this does is apply the no-margin styles to all the children of the container. Note that this does not apply to nested elements. You can see more about it here.