Im trying to do a little dashboard for some webservices i wrote, but whenever text within a widget breaks, the widget changes its position.
CSS looks like this:
#container {
text-align: center;
width: 100%;
height: auto;
}
.widget {
background-color: firebrick;
margin: 1px;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
word-break: break-all;
}
I reproduced that problem in a fiddle:
https://jsfiddle.net/vbb6fhz0/1/
If you want to align the box, then use float for better result. word-break has nothing to do with alignment.
But in your case, just vertical-align: middle solved the alignment issue
#container {
text-align: center;
width: 100%;
height: auto;
}
.widget {
background-color: firebrick;
margin: 1px;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
word-break: break-all;
vertical-align: middle;
}
<body>
<div style="width: 100%; height:100%;">
<div id="container">
<div class="widget">
<p>1dawdawdaegsergsergsrsrgrsddadawdadawdwdwbf</p>
</div>
<div class="widget">
2wdadawdad
</div>
<div class="widget">
3wadawdwdawda
</div>
<div class="widget">
4dawdawdaw
</div>
</div>
</div>
</body>
There is nothing bad with work-break you should try float
.widget{float:left;}
Related
I have the following jsfiddle: https://jsfiddle.net/CLight/1emh82cv/
This is a recursive structure where it consists of two twin cells sharing the top row, and one cell in the second/bottom row. The three cells will be recursively inserted into the bottom cell. I am trying to figure out how to make the cells expand horizontally when they overflow, without breaking the structure. Thanks a bunch.
Here's the html:
<div class="cell-main">
<div class="cell-left">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
</div>
<div class="cell-right">
test
</div>
<div class="cell-bottom">
<div class="cell-left">
test
</div>
<div class="cell-right">
test
</div>
<div class="cell-bottom">
<div class="cell-left">
test
</div>
<div class="cell-right">
test
</div>
</div>
</div>
</div>
Here's the CSS:
*{
box-sizing: border-box;
}
div{
border: 1px solid black;
}
.cell-left {
height: 100%;
padding: 5px;
width: 50%;
float: left;
text-align:left
}
.cell-right {
height: 100%;
padding: 5px;
width: 50%;
float: left;
text-align:right
}
.cell-bottom {
height: 100%;
padding: 5px;
width: 94%;
margin-left: 3%;
float: left;
}
.cell-main {
height: 100%;
padding: 5px;
width: 100%;
float:left;
}
EDIT: Updated jsfiddle and title.
I think you are searching for the overflow-wrap property.
The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box. (Mozilla MDN)
This property can have the following values, in case you need it recursive, the global values can be interesting for you:
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
If you want to keep the height of the parcel use overflow: auto on the main div's.
See my code snippet!
*{
box-sizing: border-box;
}
div{
border: 1px solid black;
overflow-wrap: break-word;
}
.cell-left {
height: 100%;
padding: 5px;
width: 50%;
float: left;
text-align:left
}
.cell-right {
height: 100%;
padding: 5px;
width: 50%;
float: left;
text-align:right
}
.cell-bottom {
height: 100%;
padding: 5px;
width: 94%;
margin-left: 3%;
float: left;
}
.cell-main {
height: 100%;
padding: 5px;
width: 100%;
float:left;
}
<div class="cell-main">
<div class="cell-left">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
</div>
<div class="cell-right">
test
</div>
<div class="cell-bottom">
<div class="cell-left">
test
</div>
<div class="cell-right">
test
</div>
<div class="cell-bottom">
<div class="cell-left">
test
</div>
<div class="cell-right">
test
</div>
</div>
</div>
</div>
I want to center vertically text, when the elements height is unknown?
html
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
css
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
Elements "Ex1, Ex2" count is unknown, so, if there are more of those, obviously, the table row will get bigger in height. I need some solution, that would be responsive to this also...
https://www.codeply.com/go/bp/4ZEUS7Q7lm
Just add row-ht-eq class to row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
Also you can play with:
display: table-cell;
vertical-align: middle;
Note: Use span Element as helper.
Html:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
Css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Full Code:
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
Change your text class to:
.left-col-text {
margin:0 auto;
}
This will automatically decide equal distance from top to bottom.
I have a header row where some of the header names are too long to fit on one line and have to be split. The headers are fixed height, sufficient for two lines. The text should be vertically centered.
Something like:
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
I can't figure out how to align all those headers correctly. Setting line-height to 40px makes the second header double-height; setting height to 40px throws them out of alignment.
Thanks!
So this is what I changed in your code:
Add vertical-align: middle to align the pills
Give line-height same as height for the pills other than split using the not selector:
.pill:not(.split) {
line-height: 40px;
}
In smaller displays the menu will wrap - so use float and clear them too.
Let me know your thoughts on this, thanks!
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
vertical-align: middle;
float: left;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
.pill:not(.split) {
line-height: 40px;
}
.pill:after{
content: '';
display: block;
clear: both;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
Flexbox can do that:
.container {
width: 100%;
height: 40px;
display: flex;
}
.pill {
display: flex;
flex: 0 0 30%;
margin: 0 1%;
justify-content: center;
align-items: center;
text-align: center;
background-color: red;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
LONG HEADER TEXT GOES HERE
</div>
<div class="pill">
Header Three
</div>
</div>
One option is change the way you are setting the elements side by side, so instead of inline-block:
Table-cell
.container {
width: 100%;
height: 40px;
}
.pill {
padding:10px;
border:1px solid white;
display: table-cell;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
vertical-align:middle;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
Add the following to your .pill css:
vertical-align:middle;
Here is an example
I need three boxes centered and ordered horizontally. Right now I have the centered but only vertically:
Here is the CSS for the box:
.box {
margin-left: auto;
margin-right: auto;
background-color: #9FDCED;
display: block;
height: 400px;
width: 500px;
}
Any help would be greatly appreciated.
Give the .box a display: inline-block and vertical-align: top to make them be aligned next to eachother. If you surround it with a .container <div> that gets text-align: center the inline content gets horizontally centered.
.container {
text-align: center;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 50px;
width: 50px;
vertical-align: top;
}
.box--high {
height: 75px;
}
<div class="container">
<div class="box"></div>
<div class="box box--high"></div>
<div class="box"></div>
</div>
A great resource for horizontal and vertical centering using CSS is https://css-tricks.com/centering-css-complete-guide/
.box1 {
display: table;
margin: 0 auto;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 200px;
width: 200px;
}
<div class="box1">
<div class="box" style="background:#cc0000;"></div>
<div class="box" style="background:#cceeff;"></div>
<div class="box" style="background:#eeccff;"></div>
</div>
Just add a float:left; to the .box class. Like this
.box {
margin: 5px;
background-color: #9FDCED;
display: block;
height: 100px;
width: 100px;
padding: 5px;
float: left;
}
Working JSFiddle http://jsfiddle.net/wcvgs1zb/
I'm trying to show three arrows, which their size can be changed.
Under those three arrows I'm trying to add a number underneath it. I want to make the numbers be at the center of the arrows no matter what their length will be.
And also I want that the whatever the different sizes of the arrows will be the numbers will be at the same height.
In order to do so I've tried the next code, but it sure doesn't seems to do the trick -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container{
height: 80px;
width: 100%;
display: table;
}
#one{
width: 33%;
font-size: 90px;
}
#two{
width: 33%;
font-size: 50px;
}
#three{
width: 33%;
font-size: 60px;
}
#one,#two,#three{
text-align: center;
display: table-cell;
vertical-align: middle;
}
#numbers {
}
.num {
float: left;
width: 33%;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="one">▼</div>
<div id="two">▲</div>
<div id="three">▼</div>
</div>
<div id="numbers">
<div class="num">8888</div>
<div class ="num">88</divclass>
<div class="num">8</div>
</div>
</body>
</html>
Any ideas what can I do?
Thanks for any kind of help
I suppose you mean that you want each text placed right below the corresponding arrow-like symbol and centered horizontally with respect to it. Then you need to make the #conrainer and #numbers elements displayed as rows of the same table, not two independent tables. And you need a container for them, constituting the table (in CSS sense). You must not use float in such a context. Here’s a rather minimally modified version of your code, to implement this idea:
<style>
#stuff {
display: table;
width: 100%;
}
#container{
height: 80px;
width: 100%;
display: table-row;
}
#one{
width: 33%;
font-size: 90px;
}
#two{
width: 33%;
font-size: 50px;
}
#three{
width: 33%;
font-size: 60px;
}
#one,#two,#three{
text-align: center;
display: table-cell;
vertical-align: middle;
}
#numbers {
display: table-row;
}
.num {
width: 33%;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 50px;
}
</style>
<div id="stuff">
<div id="container">
<div id="one">▼</div>
<div id="two">▲</div>
<div id="three">▼</div>
</div>
<div id="numbers">
<div class="num">8888</div>
<div class="num">88</div>
<div class="num">8</div>
</div>
</div>