(sorry for bad english)
I want to center everything in the div "center" (like imgs and text...) with CSS
<div id="123">
<div id="center">
<img>
<p>
...
</div>
</div>
You can do this:
CSS
#center{
display: flex;
justify-content: center;
align-items: center;
}
DEMO HERE
If you mean horizontal centering u can do it in 2 rules simple rules:
Inline Element - text-align-center (paragrafs,headings,images)
Block Element- margin:0px auto; (divs)
Related
I'm trying to do a front of an HTML website by using vue.js,
but I wasn't able to center an image using css.
I wrote all of my code in the App.vue file :
<template>
<div id="container3">
<img id="teamBackground" src="./assets/bourg_palette_rounded.png" alt="Bourg palette in background" width="360" height="170"/>
</div>
</template>
<style>
<!-- team -->
#container3 img{
display:block;
margin:0 auto;
}
</style>
I tried the text-align and the display-block + margin: 0 auto properties but it didn't change neither the placement of the image or the placement of other elements
Have you tried using display:flex; together with justify-content:center;?
You can also try out using position:absolute;
You can read more about image-centering methods here: https://www.freecodecamp.org/news/how-to-center-an-image-in-css/
#container3 {
display: flex;
flex-direction: column;
justify-content: center;
}
you can put those css codes to the parent div
#container3 {
display: flex;
width:100%;
height:500px;
justify-content: center;
align-items: center;
}
Flexbox is the most suitable solution for your problem.
The parent (#container3) should be a flex container. For horizontal centering we use justify-content: center & for vertical centering we use align-items: center.
Note: We must provide height to the parent for child to align in vertical direction. Also the above example is for default flex-direction ( row). For more details refer to the page https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox
I have currently the following definition:
<div class="div-container">
<mat-icon>new_release</mat-icon>
<span> </span>
<a><span>VO/YI/AI 1 HJ.2022a;</span></a>
<span> </span>
<a><span>ABC/BBC/VOA 7.2022;</span></a>
<span> </span>
<a><span>UN/AIDA 16.8.2022</span></a>
</div>
with
.div-container{
display: flex;
align-items: center;
}
a{
display: inline!important;
}
which results in a display like
What I would like to have is the image on the left side and than floating text, e.g.
VO/YI/AI 1 HJ.2022a; ABC/BBC/VOA 7.2022; UN/AIDA 16.8.2022
or if the space is too less on the left side the icon and something like
VO/YI/AI 1 HJ.2022a; ABC/BBC/VOA
7.2022; UN/AIDA 16.8.2022
Honestly don't know if the flex is required or not. But the icon should be positioned vertically centered on the left.
you don't need the empty spaces and if you want to add space, you can use margin for your elements.
.div-container{
display: flex;
flex-direction:row;
align-items: center;
flex-wrap:wrap;
}
<div class="div-container">
<mat-icon>new_release</mat-icon>
<a><span>VO/YI/AI 1 HJ.2022a;</span></a>
<a><span>ABC/BBC/VOA 7.2022;</span></a>
<a><span>UN/AIDA 16.8.2022</span></a>
</div>
Trying to position "Certamente não" and "Certamente Sim" at the same height.
Using margin top doesn't seem to align them correctly.
You can use "flexbox" to align them. For example:
.parent {
display: flex;
align-items: center;
}
<div class="parent">
<span>Certamente não</span>
<span>Certamente Sim</span>
</div>
Learn more about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have some weird behavior going on in my divs at the moment, each div is written like the other (they are just mirror images). The text is mimicking columns and is setting side by side instead of top to bottom like it should. The oddest thing is, it seems to be working fine on another page this particular page only contains the behavior.
The code is something like this
<div class="flex-wrap">
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
</div>
<style>
.flex-wrap{
display:flex;
flex-wrap:wrap;
}
.flex{
display:flex;
align-items: center;
}
</style>
I've taken this apart piece by piece in the inspector tool and I'm even more baffled as to why it works fine on one page and not at all on another. The last section uses the same css layout it just contains a different picture and text. Can anyone tell me how to fix this? BONUS POINTS IF YOU CAN TELL ME WHY.
The first thing to keep in mind is that flex layout applies only between parent and child elements. Descendants in a flex container beyond the children do not participate in flex layout.
In your "broken page", the four side-by-side paragraph elements are children of a flex container (.tours-sec-3-p2-wrap).
.tours-sec-3-p2-wrap {
padding: 2%;
align-items: center;
display: flex;
background-size: 15%;
padding-top: 0;
background-position: 0px 30%;
background-repeat: no-repeat;
}
An initial setting of a flex container is flex-direction: row, so the children (flex items) are lining up in a row. The quick and easy solution is to override the default with flex-direction: column.
In your "working fine" page, the image and paragraphs are not children of a flex container. These elements are children of a block container, and that container is the child of the flex container.
Your image and text are being aligned with float, not flex, properties.
If you want to use flex properties, add display: flex to the parent element.
Despite anyone's belief, the layouts of each section are exactly the same. They are generated with the cms, they are not static pages.
That said, the behavior was only different between the 2 because of the length of the content in each flex container. Adding the same content to the tours page created the same behavior.
The problem was indeed solved with flex-direction: column; and additionally adding justify-content: center;
If you don't want to use flex-direction: column; you can make your elements stretch to 100% width to force the wrap.
.flex-wrap{
display:flex;
flex-wrap:wrap;
}
.flex{
display:flex;
align-items: center;
flex-wrap:wrap; /* added */
}
.flex,
.flex h3,
.flex p
{
width: 100%;
}
<div class="flex-wrap">
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
</div>
Bonus Tip for justify-content: center and text aligning left after wrapping. (run the code snippet)
.flex-wrap{
display:flex;
flex-wrap:wrap;
flex-direction: column;
}
.flex {
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.text-centered {
text-align: center;
}
<div class="flex-wrap">
<div class="flex">
<h3>Centered (but it hasn't wrapped)</h3>
<p>centered text</p>
</div>
<div class="flex">
<h3>Not Centered (after wrap)</h3>
<p>sometimes you'll want to use justify-content: center; and keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
</div>
<div class="flex text-centered">
<h3>Centered</h3>
<p>sometimes you'll want to use justify-content: center; and keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
</div>
</div>
I want to justify a few images in a div.
I added justify-content: center;, but the images align left. Why?
.item {
justify-content: center;
}
<div class="item">
<div>
<img src="http://placehold.it/75x75" />
</div>
<div>
<img src="http://placehold.it/75x75" />
</div>
<div>
<img src="http://placehold.it/75x75" />
</div>
</div>
The justify-content property only aligns the content/s of a given container if the container is a flexible one.
Add this to your CSS:
display: flex;
The full CSS code in the head section should be:
<style type="text/css">
.flex-item {
display: flex;
justify-content: center;
}
</style>
Source: http://www.w3schools.com/cssref/css3_pr_justify-content.asp
Example: http://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content&preval=center
Fidde example: https://jsfiddle.net/L4tmgs18/1/
If I understand correctly and you're trying to center the contents of the .flex-item div (i.e. the icons), replace justify-content: center; with text-align: center;.
Your problem isn't with how you have applied the css, that is correct, but depending on what you are trying to achieve, your problem is with the actual css used.
As I can see, you have all the necessary code provided to you by "Hubert Siwkin", but it sits a tad off the left side of your page. Simple fix. You need to edit your "body" CSS style and add a "margin" value.
body {
margin: 0px;
}
This will fix the problem you are facing.
If you would like to know more about the "body" CSS style, use the following link.
http://www.w3schools.com/tags/tag_body.asp
UPDATE: I have provided an update to the jsFiddle provided by "Hubert Siwkin". Most of the code that you have is not necessary, so I have slim-lined it for you.
https://jsfiddle.net/hddbkcvv/