HTML
<div class="parent">
<span class="item">This is the text :D</span>
</div>
SCSS
.parent{
width: 150px;
}
.item{
display: flex; /* other display: flex also declared eg. -ms-, -webkit- etc */
align-items: center;
&::before{
content: '';
display: block;
margin-right: 1em;
background: url('../linkToImg') no-repeat;
background-position: center center;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
}
The above code will add an image in-front of the text and align the text to the middle of the image (Vertically).
Codepen to see example
http://codepen.io/aj372/pen/QKgXLA
On Chrome, Firefox and IE11, the text will wrap and won't overflow the parent container. However on IE10 specifically the text will not wrap at all. I have looked around on stackoverflow and additional places and none of the solutions works. This was one of the questions that asked a similar question.
IE10 Flexbox P element non-wrapping. Another solution I tried was using word-wrap and word-break. Which all did not work. Is there a way to get the text to wrap on IE10?
Related
I am building a website from an image given to me to practice (it comes from his employer as a test). I know he mainly used flexbox in the entire site, so im trying to stick with that (havent learned grid at all). On the top of the website is a sort of 'header' that includes some button links, a logo, and a search bar in the middle. The searchbar is located vertically about halfway down the entire header.
I am trying to do that without using a margin hack, but none of the typical align or justify commands seem to work. I also set a height, still nothing. Any thoughts?
Included a height property, also tried various commands like: align-item, align-items, align-self, justify-content, etc.
#searchbar {
height: 100px;
width: 15rem;
flex: 1;
/* margin-top: 15px; */
margin-right: -5px;
text-align: center;
}
I want to move the search bar down to the middle of its parent element, but nothing seems to work.
You need to apply align-self: center to the #searchbar - asyou can see - the display: flex is applied to the parent, then align-self to the div. This centeres it withing the parent. Then you will need to apply that same logic to the contents of the searchbar div itself - in order to center them within it. and adding justify-content: center to center the content horizontally within the parent div as well.
I have applied a yellow background on the parent div, a red border on the searchbar div to demonstrate the relationship and the centering of the inner div and a blue border on the text withon the searchbar div to show its centered..
#wrapper {
height : 200px;
display: flex;
background: yellow
}
#searchbar {
height: 100px;
width: 15rem;
flex: 1;
text-align: center;
align-self: center;
border: solid 1px red;
display: flex;
align-items: center;
justify-content: center
}
#searchbar-content {
border: solid 1px blue;
}
<div id="wrapper">
<div id="searchbar">
<span id="searchbar-content">Search bar content goes here</span>
</div>
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
How to use safe center with flexbox?
(3 answers)
Closed 5 years ago.
I have the following situation, the text get cuts off at the top when it not longer fits inside the container. What can I do to fix that? I'd still like the text to be centered if it's smaller than the container, and I can't change the container size.
div {
display: flex;
align-items: center;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
}
<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>
The problem here is caused by the fact that when using align-items (or justify-content) to center a flex row item, it will, by design, overflow at its top/bottom (or left/right).
To solve that a new keyword, safe, is introduced, though not many browsers support it yet.
How to use safe center with flexbox?
The other option is to use auto margin's, though with the given markup you can't, as the text doesn't have an inner wrapper (well, it has an anonymous one, though those we can't target with a CSS selector).
So by adding an inner wrapper (fiddle with wrapper) you can use auto margin's, and is well explained here:
Can't scroll to top of flex item that is overflowing container
But sometimes we just can't change the markup, and when, here is a little trick, using the pseudo elements, and use auto margin's on them.
To vertical center the text we also need the flex direction to be column so the pseudo is rendered above/below.
Stack snippet
div {
display: flex;
flex-direction: column; /* added */
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
border: 1px solid gray;
}
div::before, div::after {
content: '';
}
div::before {
margin-top: auto; /* added */
}
div::after {
margin-bottom: auto; /* added */
}
<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>
<div>
sdjhf
</div>
If you wrap the text into another tag, and set margin: auto 0; it seems to be working well.
div {
display: flex;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
background: pink;
margin-bottom: 20px;
}
span {
margin: auto 0;
}
<div>
<span>sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd</span>
</div>
<div>
<span>sdjhfkah</span>
</div>
I have two div elements which I want to center within an 'li' element. I found out that this could be done by using a flex layout. My parent div has the following properties:
display: -webkit-flex;
justify-content: center;
align-items: center;
This works and the two child divs are centering within the 'li'. Those are an image and a text element. But the additional behaviour this has, is not what I want. When the screen is too small for one line text, it is overriding the image. It looks like the following:
The more I shrink the page, the more the image dissappears. Does anybody know how this comes and how I can fix it?
EDIT Currently I am finding out how to add a working code snippet. For now, I have an image with the content structure, maybe this helps a bit.
I fill the image using the following css code:
.img_info_icon_png {
background: url("adapter-images.png") no-repeat -432px -0px;
width: 24px;
height: 24px;
}
Although the width is set to '24px', it is changing within the browser.
EDIT The following url is pointing to an example with the same behaviour: https://jsfiddle.net/Lkpxhux0/
As the flex-shrink defaults to 1, it allows for the items to shrink when not fit its parent.
Add flex-shrink: 0 to the .img_info_icon_png rule.
.outer {
display: flex;
justify-content: center;
align-items: center;
}
.outer .image {
background: url(http://placehold.it/50/f00) no-repeat;
width: 24px;
height: 24px;
flex-shrink: 0;
}
<div class="outer">
<div class="image"></div>
<div class="text">
This is some text that should not overlap the left aligned image
</div>
</div>
In IE 11 when an item items don't properly center if they have maximum width property. This example however works in Chrome and Firefox.
JS Bin
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
width: 100%;
}
.red {
background-color: red;
flex-grow: 1;
display: flex;
max-width: 200px;
}
<div class="container">
<div class="red">non centered box</div>
</div>
It is a bug. But according to IE Feedback it was supposed to be fixed already.
As a workaround, you can remove flex-grow: 1; if you don't have to use it.
Explicitly set width: calc(100%); so IE knows the box width and center it properly.
I have had this issue as well. In my case I wanted flex-grow but still wanted to limit the max-width. What I do is wrap any css I don't want IE11 to see in #support. IE11 does not support this rule and ignores its contents completely. I will just check for something that has been around forever like text-align so all the other modern browsers can apply the css rule. You can do this for anything, I just discovered this while trying to figure out an answer to this issue.
#supports(text-align:center) {
div {
max-width: 350px;
}
}
I am trying to center this text character ☢ within a circle. (☢)
While IE 10 displays the text vertically and horizontally centered, both Chrome and Firefox render too much padding at the top.
Any ideas how to fix this? (Flexbox is not a must have)
HTML
<div class="tl-icon">
<div>☢</div>
</div>
CSS
.tl-icon {
align-items: center;
background: black;
border-radius: 50%;
color: yellow;
display: flex;
font-size: 3em;
height: 3rem;
justify-content: center;
width: 3rem;
}
See live demo here: http://codepen.io/dash/pen/ZYePWP
The problem is that the inner child is a text which screws with your height.
I added a line-height which seems to fix it a bit:
.tl-icon div{
line-height:1px;
}
http://codepen.io/anon/pen/ZYePBZ
Target that child div, set it to inline-block and change the vertical alignment:
.tl-icon div{
display: inline-block;
vertical-align: top;
}
CODEPEN
I had to fart about with the dimensions a bit, but this should center vertically and horizontally, so far tested in Chrome, FF and Safari.
http://codepen.io/anon/pen/gbmEWX
Set the parent to
display:table;
Child to
display:table-cell;
vertical-align:middle;
text-align:center;
You've done everything correctly with your flexbox CSS.
The issue appears to be with line-height. You're using an html entity as text and it looks like .tl-icon is inheriting a value for line-height that doesn't work well.
Try adjusting your line-height, and using a unitless value for it. This way the line-height will compute to whatever the font size is for the interior element.
.tl-icon {
line-height:.9;
}