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
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 months ago.
I was centering the elements of my page with:
display: block;
margin-left: auto;
margin-right: auto;
but when I try to do this with one div that has two buttons they stay in the left corner, why? and how I place them in the center.
Option 1
If both the buttons are inside the div container you also need to specify the width of the div container, because by default div covers the complete width.
div{
max-width:10rem;
margin :0px auto;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
Option 2
You can also flex the div container to center the buttons
div{
display:flex;
align-items:center;
justify-content:center;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
Option 3
You can also use the simple text align center property on the div container so it will center the buttons
div{
text-align:center;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
because buttons are inline elements.
Not sure about the context but you can use this centering pattern (both horizontal and vertical) with Flexbox as well:
.container {
display: flex;
align-items: center;
justify-content: center;
}
Positioning is very easy with flexbox. Please try following properties on your div
display: flex;
justify-content: center;
align-items: center;
Justify content will place content centrally along horizontal axis and align items will place content centrally along vertical axis (for flex direction row which is default)
The div css:
text-align: center
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 am having trouble moving one line of text below another. I have a feeling its something to do with the flexbox vertical align. I have also tried using display: block but to no avail. Please help, thank you.
The problem is the first section here:
https://jsfiddle.net/sqeeux47/
HTML
<section id="section1">
<h1 id="section1heading">Welcome to our multicultural society.</h1>
<h4 id="section1paragraph">Come worship with us.</h4>
</section>
CSS
#section1 {
background-image: url(" http://i300.photobucket.com/...");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
width:100%;
height:606px;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}
Add one line to the parent container:
#section1 { flex-direction: column; }
OR
#section1 { flex-wrap: wrap; }
When you create a flex container (by declaring display: flex on an element), several default rules go into effect. Two of these rules are flex-direction: row and flex-wrap: nowrap.
This means that flex items will align horizontally on a single line, which is the issue you are facing.
In order to alter this behavior, you could change the flex-direction or allow flex items to wrap.
(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)
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/