I will use extracts and simplify for explanation purposes.
I was looking for errors in a webpage I designed some months ago and I found the following problem in the logo section:
<div>
<a id="logo" href="index.html" title="Página Principal" class="logo center">
<img src="img/mainlogo.png" alt="Corporate-logo" title="Página Principal">
</a>
</div>
Consider that the parent container has: display: flex; and there are another elements (child) inside.
In the stylesheet CSS
.logo {
flex:1;
align-self: center;
}
.center {
text-align: center;
}
As soon as I remove the center class the logo goes to left (default value I suppose). I do not understand with alig-self do not place the logo in the center.
What am I missing or not understanding?, I do not want to use the center class to center the logo.
What you need to set is the display property.
display: flex; instead of flex: 1;
(flex: 1 is shorthand for setting flex-grow to 1)
Your alignment can then be defined using the justify-content and align-items properties.
align-self will work as you have it if you add display: flex to the parent. The snippet shows a more common method.
align-self allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
SOURCE
.parent {
display: flex;
justify-content: center;
}
<div class="parent">
<a id="logo" href="index.html" title="Página Principal" class="logo center">
<img src="img/mainlogo.png" alt="Corporate-logo" title="Página Principal">
</a>
</div>
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'm trying to create a layout so that when I click on "See More" to expand the text of one container, the surrounding containers remain in the same position.
There are three containers and each container has two wrappers, a top which contains the title and bottom which contains the image, text and button. I don't know what the length of the titles will be beforehand, so in order to make sure that the boxes, text and button line up, I've given each container justify-content: space-between so that the bottom wrappers always align.
The issue arises after clicking "See More", where the bottom wrapper of each container moves down to fit the height of the container.
.main-container {
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.top-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.bottom-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="main-container">
<div class="container">
<div class="top-wrapper">
<div class="title">
TITLE 1 IS LONG THAT IT GOES TO NEXT LINE
</div>
</div>
<div class="bottom-wrapper">
<div class="image-text-wrapper">
<div class="image-container">
<img class="image" src="https://dummyimage.com/200x200/000/000">
</div>
<div class=“text” id="text">
{{ text }}
//See More code
</div>
</div>
<button>
BUTTON 1
</button>
</div>
</div>
<div class="container">
//second container code
<div>
<div class="container">
//third container code
<div>
</div>
Should I be using a table or is there a simple CSS fix to this?
You can find the full code here: Plunkr
Try adding the following to your .container class:
.container {
align-self: flex-start;
}
The align-self property allows you to override the setting for align-items that is controlling your flex items' alignment.
And adding the following to the .title class:
.title {
min-height: 50px
}
You may need to play around with this setting, but it prevents the image from rendering without any space between it and your title.
Caveat: the CSS you included here in your post isn't exactly what I got when I opened your Plunkr link -- the .container didn't have display: grid; set, but I think this should work nonetheless.
I've recently been playing with Flexbox for the first time and, in general, it's absolutely amazing. I've encountered an issue recently however, where I cannot seem to give flex items that are wrapping any vertical spacing.
I've tried using:
align-content: space-between;
but this doesn't seem to do anything. From the reading I've done, this would only seem to work if my flex container is taller than the elements contained within (is this right?) If so, then would I not have to set a height for my flex-container, which would seem to defeat the purpose of using flexbox?
The only way I can think of to make this work would be to give bottom margin to the elements within, but again this seems to defeat the purpose.
Hopefully I'm missing something fairly obvious - here's a link to a codepen: http://codepen.io/lordchancellor/pen/pgMEPz
Also, here's my code:
HTML:
<div class="container">
<div class="col-sm-12">
<h1>Flexbox Wrapping</h1>
<div class="flexContainer">
<div class="flexLabel">This is a flex label</div>
<a class="btn btn-primary">Button 1</a>
<a class="btn btn-warning">Button 2</a>
<a class="btn btn-success">Button 3</a>
</div>
</div>
</div>
CSS:
.flexContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: center;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}
EDIT - Just going to add a little more detail here, as I'm not sure I'm putting it across well enough.
In my larger project, I have some block level elements that are arranged in a row using flexbox. However, there needs to be some responsiveness as the user may reduce the screen width. At this point, I want my elements to begin to stack (hence the wrap). However, as the elements begin to stack, they are all touching vertically, where I want there to be spacing.
It's beginning to look like top and bottom margins may be the only way to resolve this - however I was wondering if there was a flexbox-centric way to achieve this.
I had a similar issue and I used the following hack to solve the issue.
/* add a negative top-margin to the flex container */
.flexContainer {
/* ... your existing flex container styles here */
margin: -10px 0 0 0;
}
/* add a corresponding positive top margin to all flex items (all direct children of the flex container) */
.flexContainer > * {
margin-top: 10px;
}
For the top row of flex items the negative and positive margins cancel out, for the subsequent rows it adds the margin between the rows (in this case 10px between rows).
It's less than elegant but it gets the job done.
If you force wrapping by applying a width you can then use margins as you normally would without setting a height.
.flexContainer {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
background: pink;
width: 150px;
}
.flexContainer > * {
margin: 1em 0;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-sm-12">
<h1>Flexbox Wrapping</h1>
<div class="flexContainer">
<div class="flexLabel">This is a flex label</div>
<a class="btn btn-primary">Button 1</a>
<a class="btn btn-warning">Button 2</a>
<a class="btn btn-success">Button 3</a>
</div>
</div>
</div>
row-gap would solve your problem
.flexbox {
display: flex;
column-gap: 10px;
row-gap: 10px
}
It's because you don't have a height on your flex content for it to calculate the space-between so at the moment, the flex container is as small as possible. Add a height and it should work.
Another hacky solution is to give the item a bottom border:
border-bottom: 10px solid transparent;
So i have a list of 30 something objects i will be loading in with ajax, as soon as i get my formatting correct i will take care of that, however i cant seem to get my flex-box css to adjust my flex items to the left side when it wraps to a new row...
http://i40.photobucket.com/albums/e240/ocfighter/Screen%20Shot%202016-01-18%20at%2012.34.51%20AM%20copy.jpg
i would like for the three bottom divs to be on the left side instead of dispersed through out the middle of the second row....
my container div for all of the divs you see displayed
#movies {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.center {
-webkit-justify-content: center;
justify-content: center;
}
html
<div id="movies" class="center">
<div class="movies_cell center">
<div class="movies_image">
<img src="img/movies/fatheroflights.jpg" alt="" style="width: 100%; height: 100%">
</div>
<div class="movies_detail">
<h1>Father of Lights</h1>
<img src="img/rating/5.png" alt="" style="margin: auto;">
</div>
</div>
</div>
Change to:
justify-content: flex-start;
Unless for some reason you want the first row to be in the center unless it's too big for the container, that would be more complicated.
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/