I'm coding a simple portfolio. I'm software developer so I don't have enough knowledge in CSS. I want to align text vertical in a row. Example of what I want to do is bellow.
Some Text 1
Some Text 2
Some Text 3
This is what I actually have at the moment.
Some Text 1
Some Text 2
Some Text 3
As you can see, I want to remove that empty space (blanko). I use <p> tag (paragraph) that I styled in CSS.
p {
display: inline;
color: #888;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
text-align: center;
padding: 8px 30px;
font-family: helvetica, arial, sans-serif;
display: inline-block;
vertical-align:middle;
}
If you still don't understand the question, I posted a picture bellow. The first panel display what I have currently, and the second one, what I want to make. Please note that the second panel is designed.
It appears that your image sizes are causing the offsets. If you can get all of those to be the same width, it should line up.
The two options I can think of off the top of my head are:
The quick and dirty - use a table. If you're going for a design job, this will usually get you passed over though.
Use two divs, set their widths, and in the first one use something similar to an unordered list - this will be for your images and whatever is to the right of the image. In the second one you put the text. These columns you would want to set position: relative, float: left, display: inline-block
What this will accomplish is that your images will be in their own 'box' and aligned to that box. And your text will be in its own 'box' and aligned to that box. The boxes edges won't overlap, so you won't have to worry about variable widths among the individual items. With a border: 0 on the columns, it will have the visual feel of being altogether.
i think this is what you need :
css
p {
vertical-align:middle;
}
here the description of the vertical align on w3schools.com
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
You could also just TAB it in. even though it isn't the prettiest.
Related
I have already provided margin for the main body.
main{margin-left:200px; margin-right: 200px; text-align: center}
As I wanted to show the texts in two lines instead of one line, I added width property in style.
.p{font-size: 12px; width: 200px}
This line of could serves the purpose of showing the paragraph in two lines but it moves the text to the left.
Then even if I try
.p{font-size: 12px; width: 200px; text-align: center; align-items: center};
The paragraph won't budge. It stays in left, out of alignment.
How Can I solve this problem.
I don‘t really understand what you want to archive. You could use a framework for example bootstrap, it‘s easy to learn and understand and also responsive.
I have a div with some fancy non-repeating background (figure 1) and I want to place a text (in fact, 1 or 2 characters) inside it. The background is asymmetrical, so I want to center the text relative to a portion of the image (figure 2). Ideally I want it to look like in figure 3.
I managed to get vertical positioning done by
div.button {
font-size: 40px;
line-height: 72px;
padding-top: 0;
}
However, I can't get it centered horizontally the way I want: text-align: center makes it look like in figure 4 (i.e. centered relative to entire div width) and padding values have no effect.
I know I can nest another div inside, size it appropriately and place my text inside. But is there a way to get this done without nesting any additional elements? The matter is that I have hundreds of those generated on my page and all of them have event handlers, so I'd rather tolerate ugly text centering than have to deal with additional nested elements.
JSFiddle: https://jsfiddle.net/qnxs2ky5/
For some weird reason you can add text-indent to move the letter to the left;
div.tile {
width: 88px;
height: 123px;
text-align: center;
font-size: 72px;
line-height: 104px;
color: #FF0000;
text-indent:-10px;
background-image: url('data:image/gif;base64,R0lGODlhWAB7AIAAAAAAAP///ywAAAAAWAB7AAAC/4xvoMvtD6N8qNqbpt68438w4Pgp5FmJaAasbmC+6LLS8tzep03GYQcMTlK5kS+hKxWTKWJvuWQijtLQlOq0Vi3YbZF38UW3GXLzN/5pzWr2GpyFudvzbysN+87Le7s8rNeHV+X3FzcolKjogMQVGKfT5UU3JgaZJElI6bhmSDgoVdi4OeoFyiTqmffGlhlKV2qperVYu3illeYKsosJe7dZeWo0HAk7ahlVTLxniBWTPGXanMoXXYq6LFMtd6f3GKr9wg18Lc7cd9y9ipRzzvs+o17+jZ1NPc9i5W7Wa8wnLU+9WZji7cgncJ+9gvgA5jLXz2APhDyAEYwk0QhFiP9k/N0gp6/dQowN2QWs+CfjpX4bB6rElc5hI5T8Or7EADKhyIsfb4ZpqZDnNp9cgO4k6nGb0XVCxxE9Y/Khy4gln4VkivRpwKgzOU6LyTWl109VK121mLVsUZ1YqYK1KtCW3LkqTtK9O3ctzZE91Z7Z29RF0nFL0bqtUzjlYTc5Aad9a5atYZt+7U6lDFnv2HCVpQZ9jFim2MtfQ4d1t/le5r+pGa62/Hlxq8Q1SzOmzXdo566kyb72fFQ2S9Goe3P+zTs2ZtNwHQvviDtwDa1vIjtffpv4WcXYZ2uXzN2299Pba/tmbr01SeSjlYsfTh68+ePoNRtXXZ/1fdf5YQfd7w5fc+r1xV5x7p2XXXzXvQfddwsiOJ6A+63XH3BtAdigggPqVmB5uTm1W3v/MTiJgxuC2KF8HwpGHTLpTUhgghpCMR9+4yloEjTPvaKOYkfUyB98YfmIV5FD9EhkZM0whkdNdUm35HSIzBSXRVFmA8dfUhnJZS+1KdPlXTXEAtWVV5qnjJlqzgeFmmayuZWbDSnZopy5rAWlnR8tBKSemvC5op9KjZSloKjEWaahf/JVqKKEIdrEYI4ecwo3kwKiy0RohCkXLwddyuOnoP4jz6iDsmgqDgVxWqQFBQAAOw==');
}
<body>
<div class="tile">i</div>
</body>
For your example -10px look perfect, but I suppose that you could use em as well to be more flexible.
I have a bunch of floating dynamic divs with different heights.
Fiddle
I want to float the divs nicely, so in the example 14,15,16 should come before 10, and then 17,18,19 should come after.
Any ideas on how I can achieve this?
Thanks :)
.blankspot div {
float: left;
border-right: solid 1px #fff;
border-bottom: solid 1px #fff;
box-sizing: border-box;
margin: 0;
padding: 0;
background: #fed;
display: inline-block;
vertical-align: top;
height: 50px;
width: 100px;
}
EDIT:
Sorry, can see my description is a bit off.
Here's a pic of what I want to achieve
My own research on this issue, tells me that a solution to the problem would result in third party code or some nasty ninja tricks.
If, like in your picture, you can control the width of the outer div to enclose 7 boxes per row then you can mess about with the margins to get the boxes to flow more neatly.
Updated fiddle: http://jsfiddle.net/g4o8rukz/3/
The reason you need to know the number of boxes per row is because you need to know which box will need shifting in the row below. If box 10 is selected to double in size then it's box 15 in the row below that needs dynamically updating with the class neighbourBelow in order to push its neighbours across in the same row.
You need to apply this +5 offset with JavaScript so you could number your boxes with something like this:
<label data-index="10">
<div>10</div>
</label>
Then it's selectedBox.attr('data-index') + 5 to determine the data-index of the box that needs its margin adjusting. This is jQuery syntax but I'm sure you get the idea.
Make the following change and your highlight box will fit the parent
width: 100px;
height: 50px;
background-color: #f0a;
I am not still clear what you wanted to tell regarding before after. If you want to appear 10 after 15 then move the rearrange just your divs. Something like the jsfiddle here http://jsfiddle.net/johirbuet/g4o8rukz/2/
please check out the codes first:
html:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="menu">
HOME
</div>
</div>
</body>
</html>
css:
#container
{
width: 80%;
margin: auto;
height: 450px;
}
#menu
{
background-color: #1b9359;
height: 25%;
}
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
.button:hover
{
background-color: #2cd282;
}
so what i would like to acheive is that when i hover to the home button, the whole div changes color, and does not get distorted or mispositioned on zoom. one answer told me that i could use display: block, but that it does not work as you can see. however, i did manage to make it work with display: block when the menu pane is like a vertical column and not a horizontal one. could anyone pls explain why this happens, and how display property of css affects that element? and how to achieve the full highlight without zoom distortion?
If you use percentages as your height and/or width then it will be a percentage of the parent container.
If you want your page to behave well when using a zoom, ie. ctrl + mouse wheel up or down, size everything in your page using em. 1 em = 16px by default. Just get used to using em. Get a calculator out and start converting things. Trust me, it's worth it to have a page that zooms straight in in out without jumbling.
Your outermost container may use percentages as long as you're using an auto margin for the central contents this is an exception to using em, that way things will still be centered on all resolutions. When I say outermost container, I mean body...
Before I tell you how to make it work I'll answer the other questions:
"...I did manage to make it work with display: block when the menu
pane is like a vertical column and not a horizontal one. Could anyone
pls explain why this happens, and how display property of css affects
that element?"
Block elements stack on top of each other vertically. This means that in a vertical arrangement if the zoom level is changed, those elements are perfectly at home taking that extra space up to the right side. Now, if they are intended to be lined up horizontally, display block will not work because that is simply just not what it does. Display inline-block will stack them horizontally preserving heights and widths set for the container, and to my own dismay, adding tiny margins between elements unlike the use of float, which would be touching the previous element, but float is definitely not something I would recommend for a nav menu.
Let's say you have your first link, and it is display:block. It will start its own new horizontal line, assuming there is not a float:(side) item before it with extra space to fill. In that case, you would add clear:both(or :left/:right) to overcome this. Now let's say you want to add a second link to the right of the first one which is display:block. The second one could be display:inline-block, and it would be on the same level as the first one, but if you did this the other way around, the second one, which is display:block, would start on its own new line below.
Now, to make your button do what you want it to do:
I will assume for the purpose of giving you a good answer that screen width in pixels is 1280px. So 80% of that is 64em. That is (1280px * .80)/16px = 64em because 1em = 16px. As I mentioned before, we do this to make your site elastic when it zooms.
You've previously designated #container as height:450px; So let's convert that. 450px/16px = 28.125em (em values can go to three decimal places, but no more) This is good, so we have an exact conversion, and not a rounded value.
container is now finished and should be as such:
#container
{
width: 64em;
margin: auto;
height: 28.125em;
}
Next change height in #menu. You have it as height:25%. That is 25% of 450px/or/28.125em If we leave it at 25% it will mess up the zooming. So let's convert. 28.125em/4 = 7.03125em
This time we must round to 3 decimal places. So we get 7.031em.
menu is now finished and should be as such:
#menu
{
background-color: #1b9359;
height: 7.031em;
}
Next is your button class.
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
At this point I lose some of my own certainty about how CSS will react, but I will start with this. Do not use float:left and Display:anything together. In this case, use display:inline-block. Get rid of the float:left. I am not sure why you have a line-height set. I am guessing it is your way of attempting to set a height for your button because it is 2.5px larger than the height of #menu (line-height of .button = 115px, height of #menu = 112.5px which we have already converted to 7.031em). If that's what you're trying to do you're doing it wrong. get rid of line height, and make it the same height as its container so that it fills it. height:7.031em;
I'll assume if you're making a horizontal menu, that you aren't trying to make one button take up the entire width. If you do not give it a width, it will fill the whole row. I'll be bold and guess you probably want your button somewhere in the ballpark of twice as wide as it is high. Let's just go with 15em(240px). width:15em;
Last is margin-left... 20/16 = 1.25em. Cake.
Now we have:
.button
{
text-decoration: none;
font: bold 1.2em sans-serif;
height: 7.031em;
width:15em;
margin-left: 1.25em;
display: inline-block;
text-align: center;
}
Keep in mind that block elements, whether inline or not, have little built-in margins on top of the margin-left that you've added.
If you make these changes, your page should zoom beautifully and your link will fill out its container vertically, but be a specified width to keep it clean. Never use px or percentages if you want to avoid zoom slop. The body container is 100% by default, but it holds everything and therefore the things in the center seem to grow outward toward the edges and therefore do not show any visible effect from the body not being set based on em, and it also makes the page naturally friendly with a variety of screen resolutions.
I hope this helps.
Edit:
As I mentioned, I lost some of my certainty. The line:
font: bold 1.2em sans-serif;
Does something that makes the container be larger than 7.031em removing that line fixes the problem, but I do not know the remedy if you insist on a font size of 1.2em. I tried setting height to 6.831em instead of 7.031em and it did not do the trick.
A few more tips:
1) If you still feel that you need a margin, perhaps margin-right would better suit you so you don't have random slack space to the left.
2) The CSS I provided does not adjust for the vertical alignment of your link text; to fix it add line-height:7.031em; to the .button class. Note: this method only words with single lines of text!!!
I am having trouble with a list which has items with alternating heights based on the content. This causes the rows to break as seen here: http://jsfiddle.net/PYRGb/ Try re-sizing the display view to see the effect.
What i would ideally like is for the list item to continue to the next row with space enough to make a row without hitting the edge of the above row. Is this possible?
I know i have mentioned 'rows' and a table could be a solution but I
am using lists to keep the display fluid and adaptable to a range of
devices.
Only solution i have found is to set a min-height that i am certain
content will not overflow like so: http://jsfiddle.net/PYRGb/1/ But i
really cannot predict the amount of content in the list items and
would like the list item to adapt height if possible.
EDIT: Just a note, if you see the resize the display to have 3 columns, you can see the effect I need but it doesn't work in other situations. (Not sure if this is the same in all browsers, I am using Chrome 26)
Thanks
remove the float and make the li display as inline-block with vertical align top.
http://jsfiddle.net/stevendwood/PYRGb/2/
ul li{
width: 100px;
padding: 10px;
margin: 0 0 20px 20px;
border: 1px solid red;
background: #eaeaea;
display: inline-block;
vertical-align: top;
}
You can set vertical align to middle or whatever you prefer.