I want to align an text to an exactly position, like 2cm from right not the pre-stabled positions like right, left and center. There's an example: Example
How can I center the Regular, upgraded and exclusive cases like that?
per my comment, here is how the text is centered, but the price tag is included as an inline element with the text.
html
<p class="container">
Text goes here
<span class="block">
$3
</span>
</p>
CSS
.block {
padding: 4px;
background: lightblue;
border-radius: 2px;
margin-left: 4px;
}
.container {
max-width: 400px;
text-align: center;
border: 1px solid;
}
EDIT:
based on the additional information you provided, it's not just aligning text that you were having an issue with, but also layout in general.
I've updated my example to show how you could align elements within a container using text-align: center; and converting the different text/price items to have display: inline-block;.
This is just an entry point to get you started. There are many other ways to layout content with CSS, from floats, flex-box and new CSS Grids. I suggest you review each to determine what is appropriate for your project.
Updated Demo: https://codepen.io/scottohara/pen/oWLxXN
Related
I am trying to create a horizontal line inserted between the image and text using html and css.
The image is on the very left side of the screen, and the text is on the very right side of the screen. Then the horizontal line inserted "IN THE MIDDDLE" and "VERTICALLY ALIGN CENTER"
I am now facing a very strange problem.
1. If i increase the width of hr over than 80% the text next to it will be break to new line
If I scale down the screen the text next to it will also break into a new line, how can I make it responsive without breaking into a new line.
I am very new to html and css please kinldy suggest, I have tried reading and finding solution in the forum it seems very difficult to understand and difficult to be applied
I am very new to html and css please kinldy suggest, I have tried reading and finding solution in the forum it seems very difficult to understand and difficult to be applied
hr{
display: inline-block;
margin:auto;
width:80%;
}
img {
vertical-align: middle;
display: inline-block;
height: 70px;
width: 70px;
border: 1px solid red;
}
p {
display: inline-block;
vertical-align: middle;
}
<img src ="example" alt="Product Image"><p>Healthy Cake</p><hr><p style="padding: 10px; background-color: green;">Promotional Price</p>
</html>
hr should be used to divide elements vertically not horizontally but you can manage this using flexbox on a wrapper
.wrap {
display: flex;
align-items: center ;
}
hr {
flex:1
}
<div class="wrap">
<img src="http://www.fillmurray.com/g/140/100" alt="">
<hr>
<p>Product Description</p>
</div>
Try this and it may be solve your problem,
Add margin-top: 25px; to your <hr> style and add margin-top: 0px; to your <h2> style
I have tried the above mentioned styles and i got like the below screenshot.
I have a flexbox with three items (divs) laid out horizontally.
I would like the spacing between these items to be equal.
The problem is, however, that I have breakable text within these divs.
In the example below, the spacing between item 1 and 2 is less than the spacing between item 2 and 3 because the text in item 2 is wrapping without the width of the div being adjusted.
Any suggestions on how to achieve equal spacing while still allowing breaking text?
(Note that the background colors in the example are to illustrate the problem of item 2 being off-center)
.outerContainer {
width: 430px;
}
.container {
display: flex;
padding: 20px;
background-color: tomato;
}
.container > div:not(:last-child) {
margin-right: 20px;
}
.container > div {
background-color: pink;
word-break: break-word;
display: flex;
}
.fig {
border: 2px solid black;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-right: 5px;
}
<div class="outerContainer">
<div class="container">
<div>
<div class="fig">1</div>
<div>two words</div>
</div>
<div>
<div class="fig">2</div>
<div>some we somewrap </div>
</div>
<div>
<div class="fig">3</div>
<div>some text</div>
</div>
</div>
</div>
You seem to be looking for text-align: justify.
Other possible solutions imply design rather than code, such as exactly what you used to demonstrate the problem: give your elements a distinctive background so they get visually defined by the actual element size, not by the contained text.
Or give them a distinctive border.
You should also consider word-break: break-word (which instead of increasing spaces between words on same row to justify text it simply breaks the word at the end of the available row space).
Could you still state about your elements they're not evenly spaced if rendered like this?
.outerContainer {
width: 400px;
}
.container {
display: flex;
background-color: #888;
padding: 20px;
}
.container > * {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);
padding: 20px;
box-sizing: border-box;
word-break: break-word;
color: #666;
}
.container > div:not(:last-child) {
margin-right: 20px;
}
.container > div {
background-color: white;
}
<div class="outerContainer">
<div class="container">
<div>two words</div>
<div>and some short somelongword</div>
<div>some text</div>
</div>
</div>
Apart from the above, the answer to your question is: it's not possible using CSS. To simplify your problem for a clearer understanding, you should consider each element has only 1 row (because when there are more than one rows, the problem is still replicated on each individual row, on some more than on others).
The desired outcome is that each of those rows are rendered in such a way that their content would stretch over an arbitrary allocated space by proportionally changing one or more text properties, in a manner that would make the first letter aligned to the leftmost side of the allocated space and would align the rightmost letter with the right limit of the allocated space.
Technically, you can achieve it by modifying:
the space between words (when the row has multiple words)
the space between letters
the font size
combinations of the above
Using only CSS, you can only proportionally and dynamically modify the space between words, by using:
text-align: justify;
text-align-last: justify;
You can also modify the distance between letters, using letter-spacing property, and you can also modify the font-size but not "dynamically" (so that it fills the desired space exactly) - you could calculate such changes on the fly using JavaScript but chances are no matter what you do, one glove won't fit all sizes.
The rule of thumb here is: try to make it clean and natural.
Leaving technicalities aside and trying to solve the real problem (that "it doesn't look good"), the proper answer is: talk to a designer.
Designers are trained into turning average looking stuff or even bad looking stuff into stuff that looks awesome by adding, removing or changing details an average programmer wouldn't think about or, to be more exact, wouldn't have thought making those particular changes would make the bloody thing look so good.
In CSS, how can I center text around a specific word?
For instance, let's say I have the following DIV:
<div style="text-align: center;">
Previous Day | Navigation | Next Day
</div>
The text will technically be centered, but the word "Navigation" will NOT be in the exact middle. Rather, the middle will be exactly between the letters "v" and "i". This is because when centering text, the length of the entire string is taken into account.
How can I make the middle instead be between the "g" and the "a", using (preferably) only CSS? Modifying the HTML is also acceptable. As a last resort, I'm willing to use JavaScript, although only if it's kept simple, otherwise it's not worth it to use complex JavaScript for such a simple task.
Fixing the width of the elements containing "Previous Day" and "Next Day" is probably the simplest solution:
<div style="text-align: center;">
<div style="display: inline-block; width: 12em; text-align: right;">Previous Day</div>
<div style="display: inline-block;"> | Navigation | </div>
<div style="display: inline-block; width: 12em; text-align: left;">Next Day</div>
</div>
Fiddle here.
You can wrap your individual items in an HTML tag, like an anchor, and float them to achieve your desired result. Floating the tags places them side-by-side, and giving each item a percentage-width that collectively adds to 100% effectively centers the elements in their container.
Note, there are some pitfalls to using floats. You need to clear the parent div to properly lay out elements following a container with floated children. Also, if the child elements have any padding, this will be added to the percentage width and misalign the children unless you use box-sizing: border-box; on the child elements.
HTML
<div class="container">
Previous Day
<span class="separator">|</span>
Navigation
<span class="separator">|</span>
Next Day
</div>
CSS
.container {
color: white;
margin: 0 auto;
width: 80%;
min-width: 320px;
background-color: black;
overflow: hidden; /* to clear the div */
}
.container a {
text-align: center;
float: left;
width: 32%;
overflow: hidden;
background-color: orange;
}
.container .separator {
float: left;
text-align: center;
padding: .5%;
}
The colors are to show that it is centered in its parent element.
Here's a live demo jsFiddle
I have a block with information, floating left and a button group, floating right.
The information block has 2 rows. The first row holds information on top, but the 2nd line should be vertically centered using the whitespace available (the white space is created by the floating right button group).
How can this be done ?
HTML:
<div class="rowWrapper">
<div class="moduleInfo">
<div class="moduleTitle">Module1</div>
<div class="moduleTime">08-05-2013 11:12:33</div>
</div>
<div class="actions">
<button type="submit">Action1</button>
<button type="submit">Action2</button>
<button type="submit">Action3</button>
<button type="submit">Action4</button>
<button type="submit">Action5</button>
</div>
</div>
CSS:
.rowWrapper {
border: 1px solid #a29791;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 4px 0;
padding: 4px;
overflow: hidden;
}
.moduleInfo {
float: left;
}
.actions {
float: right;
}
.actions button {
display: block;
}
I have a fiddle created for this:
http://jsfiddle.net/DrDelete/bLw79/
If the available size is always the same, you can use line-height:
http://jsfiddle.net/bLw79/2/
if you try center-vertically, it won't work,you can try 2 options
1) line-height:40px;
2)position:absolute; top:50%; height:240px; margin-top:-120px; //margin-top = 1/2 height
i would prefer using the 1st option
Add the following in your CSS:
.moduleTime{
padding-top: 35%;
}
But I suggest you to use table here since it will provide your moduleTitle text more flexibility as you can see by changing the text in your code and then changing the moduleTitle text in the code provided on this Fiddle
Vertical centering is a little tricky one. If there's only one line of text you can always use line height. But, in case you have multiple lines of text or images this technique is not going to work. Instead, change the parent display property to table (display:table). And give the vertical align to center (vertical-align:center) to the child elements. That's it, now child elements will be vertically aligned within parent. And don't forget to give a height for parent.
I'm trying to create info graphics / data panels on a hobby site that I'm working on. I'm wishing to display text for one of the stat totals vertically rotated with supporting text wrapping around this however I'm having great difficulty getting this aligned correctly.
Instead of pasting code I can show my work in progress page at:
http://www.footy-results.co.uk/
The info graphic panel that I can't get to work is the '148 TEAMS' ... hopefully the problem is obvious to css wizards!
Any hints or tips would be much appreciated and anyone who can help me resolve this issue will be credited on the site when I launch!
I have a solution fou you but its not 100% clean. In my opinion its just not allowed to use negative margin but I can't find another solution. And furthermore you have do define height and width of the element...
You have to place the rotaded <span> element into anothe <div>. Then you can position the <div> properly and the text is floating around it. Here the code:
HTML:
<div class="infoPanel">
<span class="infoPanelVertical">
<div class="spanwrapper">
<span class="infoNumberVertical">148 TEAMS</span>
</div> your text here...
</span>
</div>
CSS:
.spanwrapper {
float: left;
height: 157px;
position: relative;
width: 48px;
}
.infoNumberVertical {
background-color: #F5F5F5;
border: 1px dotted #DDDDDD;
color: #1A3C7B;
float: left;
font-size: 32px;
font-weight: bold;
margin-left: -56px;
margin-top: 60px;
transform: rotate(-90deg);
width: 150px;
}
The problem is that you have to give a hight and a width to the wrapping <div> or the span in it otherwise the text does not know where it should get floated. If you don't define any width or height the text is just wrapping around the rotated text which is a big rectangle.
I you use a CMS or want to fill in the content dynamicly this is a bad solution. But you could also define the width and height trough js but thats kinda hacky solution I think.