text-align
A small css module for setting text-align properties
text-align.css demo for text-align.css
I want to center h2 inside #top but vert-aliignt middle doesnt work same auto margin... I ave no idea what to do!
#top {
display: block;
position: relative;
height: 100px;
background-color: rgba(89,144,222,.6);
}
#top h2{
text-shadow: 2px 2px black;
text-align: center;
color: white;
font-family:"Impact";
font-size: 50px;
}
effect is - 
Source: (StackOverflow)
I'd like to take an h2 element and span it's text across the width of it's div.
text-align:justify;
only spreads the text if it's width is greater than the width of it's container... kind of like Photoshop's justify-left
Source: (StackOverflow)
I have a Listview in detail mode with 3 columns. I want to set the text align for the headers to "center". This works for the last two columns but not for the first. If I want to change it to "center" and click on "center", the field keeps being set to "left". Can I change this using the properties or do I need to program this?
Thanks.
Source: (StackOverflow)
A few other questions have already addressed how best to apply text-align: justify to get inline-block elements to spread out evenly… for example, How do I *really* justify a horizontal menu in HTML+CSS?
However, the 100% width element that "clears" the line of inline-block elements is given its own line by the browser. I can't figure out how to get rid of that empty vertical space without using line-height: 0; on the parent element.
For an example of the problem, see this fiddle
For my solution that uses line-height: 0;, see this fiddle
The solution I'm using requires that a new line-height be applied to the child elements, but any previously set line-height is lost. Is anyone aware of a better solution? I want to avoid tables so that the elements can wrap when necessary, and also flexbox because the browser support isn't there yet. I also want to avoid floats because the number of elements being spaced out will be arbitrary.
Source: (StackOverflow)
I am trying to figure out the difference between putting an align attribute on a table cell vs using text-align css attribute. The code below shows different results in IE vs Others. In IE, the align ends up aligning every sub child, so the text 'test' is centered aligned, while in FF/Webkit this is not the case and it remains left aligned. What is the correct behavior?
<!DOCTYPE html>
<html>
<head>
<style>
table { width: 60%; }
table td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td align='center'>
<table>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Source: (StackOverflow)
Sticky speaking here's the question itself:
Is there any property in CSS3 that alows to place some elements like <p> or any oh <h$> like text-align but in percentage.
For instance HTML code:
<p id="first">Here's first P</p>
<p id="second">Here's second P</p>
and its style:
<style>
#first {
margin-left: 50%;
}
#second {
text-align: center;
}
</style>
It doesn't look the same in different width. Is there any property like background-position but for such elements as introduced above?
Source: (StackOverflow)
I'm looking for a CSS solution to align text differently based on whether it breaks into more than one line or not. No Javascript, thanks. I'm happy with edge browser support, though.
Here's what I want to achieve:
When the text content only fills one line, I want it to adhere to text-align: center;. Else, I'd like it to be text-align: left.
I'm aware that I could assign different classes based using Javascript based on:
- number of characters
- height of element vs line-height
But these solutions aren't generic and have many complications. What I'm looking for is a CSS (probably CSS3 edge) solution to the problem that has so-far eluded me.
Source: (StackOverflow)
I'm trying to make VIM as my ruby/rails editor. So fat I'm really impress with its features
and I was able to install following plug ins to give me a better IDE experience
- auto-pairs
- better-snipmate-snippets
- nerdcommenter
- nerdtree
- tabular
- vim-endwise
- vim-nerdtree-tabs
- vim-rails
- vim-surround
However I'm still having difficulties in finding a way to format/align my code. As an example sometimes I might copy and paste code from another place and then the entire code is scattered.
Ex: items.css.scss
.throw {
float:left; width: 100%;
margin-bottom: 2px;
border: solid gray 1px;
border-radius: 10px;
.cell {
float: left;
padding-left: 6px;
padding-right: 6px;
}
}
I want it to be
.throw {
float:left; width: 100%;
margin-bottom: 2px;
border: solid gray 1px;
border-radius: 10px;
.cell {
float: left;
padding-left: 6px;
padding-right: 6px;
}
}
What would be the best plugin/method to align/format code in VIM
Source: (StackOverflow)
I have a group of items. Is it possible to center the whole group but make sure items on new lines appear on the left and not the center?
Here is the example: http://codepen.io/anon/pen/yczku/
And this is what I need: http://f.cl.ly/items/103O0n0h2N0n1k163E26/result.png
Notice the group of green cells is centered inside the red container but each new line is still left-aligned.
I should mention that the solution must not rely on a fixed width (and setting a fixed padding or something like that). I am using static width on the container in the example just to make sure it appears the same size on all screens. In my final project this structure has dynamic width.
I know that it's possible to achieve what I need using JavaScript/jQuery, but I am interested if there exists a CSS-only solution.
Edit:
Each green cell in the example has static width, but together as a group they should fill the entire available space. So if container was made wider, more than 3 items would fit in the first row and vice versa - if the container was made narrower, each row would only hold 2 or 1 item.
Source: (StackOverflow)
I have input fields which are supposed to be shown centered and then the texts to these input fields are supposed to be aligned left and "start" with the input fields.
http://jsfiddle.net/tfbatp5v/2/
.inputdes {
color: #9b9b9a;
font-size:20px;
height: 200px;
}
.blue {
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue">text1<br><input id="inputfield1" /></div>
<div class="blue">text2<br><input id="inputfield2" /></div>
<div class="blue">text3<br><input id="inputfield3" /></div>
</div>
</div>
However, no matter what I do, every time when I use text-align: left; it automatically aligns the inputfields left as well. I tried to group the text areas together with class names but it doesn't work. Does anyone know the answer?
Thanks !
Source: (StackOverflow)
I have a div with a few words of text in it, which I want to extend as far as the div itself.
In other words, the word-spacing should automatically stretch until the last word reaches the edge of the div.
By reading about text-align: justify, I assumed that's exactly what it was supposed to do. But either I'm mistaken, or I'm doing something wrong: http://jsfiddle.net/rLnrtu0x/1/
To illustrate:
Right now, this is the result:
|text text text text |
But I am trying to achieve something like this:
|text text text text|
Am I doing something wrong? Is there another method of accomplishing this?
Source: (StackOverflow)
I have a div that is too narrow to text-align:justify (gaps too wide), but yet looks un-uniform when right- or left-justified, because then there is a large gap at the end of lines. Left-justified looks best, but could I use hyphenation, like in books? Using CSS?
Source: (StackOverflow)
I have this css code here
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center; and vertical-align:middle; but neither of them worked.
and here is the HTML Code
<div class="navigation">
<ul>
<li><a rel='nofollow' href="http://surfthecurve.ca/">home</a></li>
<li><a rel='nofollow' href="http://surfthecurve.ca/?page_id=7">about</a></li>
<li><a rel='nofollow' href="http://surfthecurve.ca/?page_id=9">tutors</a></li>
<li><a rel='nofollow' href="http://surfthecurve.ca/?page_id=11">students</a></li>
<li><a rel='nofollow' href="http://surfthecurve.ca/?page_id=13">contact us</a></li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
Source: (StackOverflow)
I have this structure:
<div class="father">
This string is left-aligned
<div class="divToCenter" style="display:inline-block;">
//contains other divs.I used inline block for making this div as large as
//content ATTENTION: its width is not fixed!
</div>
</div>
How could I say :
Let me have ONLY the class named "divToCenter" centered in "father" div.
Thanks
Luca
Source: (StackOverflow)
I have been trying to implement Chris Coyier's inline-block + text justify solution to automatically distribute div's horizontally in a given wrapper's width. http://css-tricks.com/equidistant-objects-with-css/
This works great when the elements are imediately loaded into the DOM but for some reason fails when adding elements programattically through JS. It's as if the browser just ignores the css properties.
Check out this fiddle for a very basic example: http://jsfiddle.net/xmajox/NUJnZ/
The first two rows are added on HTML load. Click the button to add more in run time through JS.
Initially I thought it could be somehow related to the use of pseudo-element :after so I tried a different version with a DOM node instead: http://jsfiddle.net/xmajox/wnPSA/
Unfortunately it reacts exactly the same way.
Anyone has any idea why this happens? or better yet, how to fix/prevent it?
Source: (StackOverflow)