I am trying to make Matter in the HTML to be left align and Index to be center align, do I have to write another CSS class and apply to index or there is a way to manage this in the same page-title class
.page-title {
float: left;
width: 100%;
padding: 10px 10px 0;
line-height: normal;
border-bottom: 1px solid #b1b7ca;
margin-bottom: 15px;
margin-left: 10px;
}
<div class="page-title">Matter Index</div>
Well you can do it with a little trick like this:
Include :after and :before elements to use text-align:justify and separate the words like "three" columns.
Note:You need to add a blank space at the begin of your text
Use direction to get the second word aligned to the center
.page-title {
padding: 10px 10px 0;
line-height: normal;
border-bottom: 1px solid #b1b7ca;
margin-bottom: 15px;
margin-left: 10px;
text-align: justify;
direction:rtl;
}
.page-title:before,
.page-title:after {
content: " ";
display: inline-block;
}
.page-title:after {
width: 100%;
}
<div class="page-title"> Matter Index</div>
Yes you have to separate them. Below you will see that Matter is in separatae span and is floating left. Index is in parent Div and aligned center.
.page-title {
float: left;
text-align:center;
width: 100%;
padding: 10px 10px 0;
line-height: normal;
border-bottom: 1px solid #b1b7ca;
margin-bottom: 15px;
margin-left: 10px;
}
.page-title span {float:left;}
<div class="page-title"><span>Matter</span>Index</div>
Related
I have 2 divs and 2 H4 headers which need to be in a line. Tried to align with text-align and float left but it doesn't work.
From my understanding, side by side alignment can be achieved by using float for the elements but it is not happening in my case. Also unable to center them. At present trying to use margin left with a 30% which I believe is not a proper solution. The images below shows how it looks currently and how I am trying to make it look.
HTML
<div class="k-legend-title">
<div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div>
<h4 class="">Driver 1</h4>
<div class="k-stat-title-color-box" style="background-color: #652D91;"></div>
<h4 class="">Driver 2</h4>
CSS
.k-legend-title{
color: #C3CF01;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
float: left;
margin-top: 6px;
margin-right:5px;
margin-left: 30%;
}
Current Layout
Trying to get this layout. Center and in 1 line
Make them inline-level, don't use floats. Then you can align them horizontally through text-align on their container, and align them vertically through vertical-align on themselves.
.k-legend-title {
color: #C3CF01;
text-align: center;
}
.k-stat-title-color-box, h4 {
display: inline-block;
vertical-align: middle;
margin: 5px 0;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
}
<div class="k-legend-title">
<div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div>
<h4>Driver 1</h4>
<div class="k-stat-title-color-box" style="background-color: #652D91;"></div>
<h4>Driver 2</h4>
</div>
By default h1-h6 elements has display: block, you should use display: inline-block in this situation.
h4{
display: inline-block;
}
h4:first-of-type{
margin-right: 15px;
}
JSfiddle here
Try using display:inline-block with parent using text-align:center:
.k-legend-title {
text-align:center;
color: #C3CF01;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
display:inline-block;
margin-top: 6px;
}
h4 {
display:inline-block;
}
.k-legend-title h4:first-of-type {
margin-right: 10px;
}
Fiddle: https://jsfiddle.net/kaarccq4/
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
I've this list of buttons
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
}
.special {
font-size: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
Now what I've done is that the special button has a bigger font-size. The weird thing is that increasing the font-size moves this button up. I guess this is all very logic but cannot find the explanation (which should help me to fix this of course!)
The explanation is that buttons are inline-element, and the text in the button determines the vertical alignment.
The default vertical alignment for inline elements is to place the bottom of characters on the base line of the text. If you look at the buttons in your example, you see that the bottom of the characters line up exactly.
If you add some text around the buttons, you see that the text of the buttons aligns with the text outside the buttons: http://jsfiddle.net/Guffa/q640e8sc/4/
If you specify a different verical alignment for the buttons, they will line up differently. If you for example use vertical-align: middle;, the buttons will line up at the center of the characters, so the edges of the buttons will line up: http://jsfiddle.net/Guffa/q640e8sc/5/
Another way to avoid that alignment is to make the buttons block elements, for example using float: left;. That makes the buttons line up, but it of course make the buttons react differently to surrounding elements: http://jsfiddle.net/Guffa/q640e8sc/6/
Use vertical-align:
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
And to align the text in the middle, you may use line-height.
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
line-height: 16px;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
line-height: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
<button>D</button>
<button>E</button>
I am having an issue that I hope someone will be able to help me out with.
I have and h2 element that i have given a width, so that long headlines break into two lines. I then want to add a border-bottom to the text, not the block element, and so i have wrapped the text inside the h2 element in a span that i apply the border to. Like this:
<h2><span>My headline that breaks into two lines</span><h2>
My css is like this:
h2 {
width: 455px;
height:170px;
text-align: center;
font-size: 67px;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 span {
border-bottom: 2px solid blue;
}
Everything about works fine, EXCEPT i can't get my border to get any closer to the text. No matter what values i put in line-height and padding, the border seems to be stuck about the 30px below the text. Does anyone have any clever thoughts as to what I can do? I feel like I have tried every combination possible.
Thank you very much in advance.
html :
<div class="demo">
<h2>
<span>My headline that breaks into two lines</span>
</h2>
</div>
css:
.demo {
width: 455px;
height:170px;
text-align: center;
}
h2 {
border-bottom: 1px solid red;
display : inline;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 > span {
font-size: 67px;
line-height: normal;
}
demo http://codepen.io/gauravsam/pen/PZQwNz
add padding-bottom:10px; demo
h2 {
width: 455px;
height:170px;
text-align: center;
font-size: 67px;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 span {
border-bottom: 2px solid blue;
padding-bottom:10px;/*add this*/
}
in my example you will see that by making line-height on the h2 relative, the span rests just under the descender (e.g. the letter y), is the border now closer to the baseline than you had it?
h2 {
text-align: left;
width: 400px;
font-size: 40px;
font-weight: normal;
margin: 0;
padding: 0;
line-height: inherit;
}
span {
border-bottom: 2px solid blue;
}
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>