I want to vertically center a text by its underline and overline. The text element is inside a div that is absolutely positioned and has an unknown (variable) height. The text's font size and horizontal position also have to be variable.
In other words: I want to position the text so that the center between underline and overline is exactly at the center of the containing div.
Additionally, I want to display a rectangle (using a div) in front of the text:
<div class="container">
<div class="rectangle"></div>
<div class="text">Text</div>
</div>
Here's an example: http://codepen.io/zabbarob/pen/CHxLe
* { margin: 0; padding: 0; border: 0; }
.container {
position: absolute; top: 5px; height: 25px;
zoom: 800%; /* debugging */
vertical-align: middle;
}
.rectangle {
display: inline-block;
width: 50px; height: 100%;
background-color: green;
}
.text {
display: inline-block;
text-decoration: underline overline;
font-size: 20px;
position: absolute; left: 50px;
background: lightgreen;
/* center vertically by underline and overline */
top: 0; bottom: 0;
line-height: 25px;
}
Hmm, rather than using an actual overline/underline (which could be a bit of a headache to customize), have you considered mimicking it using border top/bottom instead? So you could modify your CSS definition for text as follows:
.text {
display: inline-block;
/*text-decoration: underline overline;*/
font-size: 20px;
position: absolute; left: 50px;
background: lightgreen;
/* center vertically by underline and overline */
top: 0; bottom: 0;
line-height: 23px; /* Height of the element beside it, minus 2px for the borders */
border-top:1px solid #000;
border-bottom:1px solid #000;
}
Here's a modified CodePen to demonstrate. Depending on your requirements, this may not be optimal (for example, border scales with zoom, whereas underline does not), but it does at least give you a different way of approaching the problem.
Hope this helps! Let me know if you have any questions.
Have you tried using the methods outlined here: http://css-tricks.com/centering-in-the-unknown/ ?
Always works for me.
Hope this helps
Related
Quick and simple question,
is there a quick way to change on a button, the distance from the borders edge to the "real" edge of the element.
I dont want to get the border further away, i want that the background is spread 1 or 2 px more over the edge of the border.
Google does not show me the right solution or I'm searching with wrong terms, hope some of you can help me.
Since my question is not clear, here is an picture of what try to achieve
https://picload.org/view/rpogroor/test.png.html
What you need to use over here is the pseudo element. The trick is to have a normal button but not to use a border on that. Insted, use an :after pseudo element and using CSS positioning, we can simulate the effect you want, that is, the background spreads beyond the dashed border.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
button {
-webkit-appearance: none;
background: #ede032;
padding: 10px 20px;
border-radius: 20px;
border: 0;
position: relative;
margin: 40px;
}
button:after {
content: "";
position: absolute;
top: 3px;
right: 3px;
left: 3px;
bottom: 3px;
border: 1px dashed #515151;
border-radius: 20px;
}
<button>Hello There</button>
Here, the code is pretty self explanatory. I am having a simple button, where am setting some basic styles like background, border-radius and so on. Later, am having an :after pseudo where I use the dashed border which then I overlay over the button using CSS Positioning.
Your question is un-clear. What do you mean by
from an borders edge to the "real" edge of the element.
Are you trying to not display the border? If that's the case then you can always set the border to have a transparent color which would not show the border.
You can add padding to the button to increase space between its contents and the edge of the button.
Is this what you want?
padding:5px 10px ;
This means that the : Top and bottom padding are 5px.
Right and left padding are 10px.
By default a button has padding : 1px 6px; So to increase it by 1 or 2 pixels, just use appropriate values.
.spaced-out {
padding: 5px 10px;
}
<button>Hello</button>
<br><br>
<button class="spaced-out">Hello</button>
You want box-sizing:border-box.
This will ensure that, no matter the border-width, the element will be the same size. I assume this is what you want although the question is not very clear what you're looking for.
Notice the difference between the boxes with borders:
.flex-cont {
display: flex;
width: 100%;
height: 300px;
align-items: center;
justify-content: center;
}
.flex-item {
margin: 10px;
height: 200px;
background: blue;
flex: 1;
border: solid 20px green;
}
span {
display: block;
position: relative;
top: 45%;
text-align: center;
width: 100%;
}
.one {
box-sizing: content-box;
}
.two {
border: none;
}
.three {
box-sizing: border-box;
}
<div class="flex-cont">
<div class="flex-item one"><span>box-sizing: content-box</span></div>
<div class="flex-item two"><span>No border</span></div>
<div class="flex-item three"><span>box-sizing: border-box</span></div>
</div>
Here is a new JS fiddle based on your edit.
New JS Fiddle
I've been trying to create a titlebar and left-side panel using div's and css, but as in the screenshot below,
is it possible to create a curvature using css, similar to the red
curvature I've drawn with paintbrush?
You'll also notice a visible blue colour difference between
the yellow arrows. Is it possible to have a more uniform gradient?
I'd like a uniform gradient on the vertical and horizontal panels.
What I'm actually trying to achieve is shown in the bottom half of
the image. A uniform panel with shadows at the edges. Is it possible
to create using CSS or do I have no other option other than to design
it in GIMP and use an image for the entire vertical and horizontal
panel (it's hard to design in GIMP too)?
A jsfiddle example or a link to an existing example would help best. I'm not new to programming, but am new to css.
You could use :after :pseudo-element for that cut and apply inset box-shadow to achieve this.
For the text Logo, Title and Menu you could add spans and apply display: inline-block to first two spans.
body {
background: #C4C4FF;
}
div {
width: 250px;
height: 100px;
position: relative;
background: #8080FF;
}
div:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
background: #C4C4FF; /* This color must be same as background */
border-top-left-radius: 30px;
box-shadow: inset 6px 6px 10px -6px #666;
}
span {
display: block;
font-weight: bold;
font-size: 18px;
color: white;
width: 125px;
height: 50px;
text-align: center;
line-height: 50px;
}
div span:nth-of-type(1),
div span:nth-of-type(2) {
display: inline-block;
}
<div>
<span>Logo</span
><span>Title</span>
<span>Menu</span>
</div>
For a given word wrapped in a span element, I am trying to make a tooltip appear on hover using plain CSS only (without the various tooltip functions, the reason being that I need to have LaTeX displayed within the tooltip). The tooltip itself is a span within its parent span. Currently I'm getting a tooltip that is off center (left) while I'm trying to achieve the result on the right:
JSFiddle here. I've tried various combination of display (inline, table, block) with auto 0 margin etc. unsuccessfully.
Try adding the following css property and let me know how that works for you:
.link-cont:hover .tooltip{
display: table;
left: 10%;
}
You ought to be able to adjust to suit your needs - 10% seemed to do the trick with this particular example.
(I've updated your JS fiddle for you with the above)
It's because your tool tip is position absolute. You can't use margin auto on absolute.
Try having your container to place the tool tip above the text absolute and then have another child element inside that is relative. You can the give that element margin auto.
A fairly easy way to center the tool-tip is to create a wrapper .tip-wrap that is
a child element of the link text block .link-cont. tip-wrap has the same width
as its parent and has text-align: center to center the inline-block .tooltip.
.tip-wrap is absolutely positioned just above the top border of .link-cont.
Since you specifiec a height of 20px, and the decorative triangle is 5px, the
top offset is 25px.
Note: If your tool tip is longer than the link text, then you need to make some
adjustments to the positioning of the .tip-wrap. Specify a sufficiently long
width (the exact length does not matter), and then apply a negative margin equal
to half of the specified width.
.tip-wrap {
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 25px;
width: 200px;
display: none;
text-align: center;
}
.link-cont {
display: inline-block;
cursor: default;
position: relative;
background: grey;
width: auto;
text-align: center;
white-space: nowrap;
overflow: visible;
}
.tooltip {
background: #000;
color: #fff;
text-decoration: none;
padding: 15px;
border-radius: 10px;
display: inline-block;
height: 20px;
height: auto;
text-align: center;
}
.link-cont:hover .tip-wrap {
display: block;
}
.tooltip .tooltip-triangle {
display: block;
position: absolute;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
}
.tooltip .tooltip-triangle {
border-top: 5px solid #000;
bottom: -5px;
left: calc(50% - 5px); /* slightly more accurate */
}
<p>Text.
<br>
<br>
<br>This is a <span class="link-cont">loooooooooooooooooooooooooong
<span class="tip-wrap"><span class="tooltip ">the content<span class="tooltip-triangle"></span></span>
</span>
</span> word.</p>
<p>This is a sentence containing a <span class="link-cont">short
<span class="tip-wrap"><span class="tooltip ">the short word content<span class="tooltip-triangle"></span></span>
</span>
</span> word and a few extra at the end.</p>
I am new to stackoverflow and have searched through some of the other answers and tried a lot of different things but can't seem to get it right.
I need to vertically align the 'Hide Message' button with the paragraph of text so that the button appears in the centered alongside the text (jsFiddle link below). The button also needs to align with another div on the page so it has to have:
position: fixed;
right: 50px;
The main problem I am having with some of the other solutions is that if you shrink the browser, it doesn't stay vertically aligned with the text:
http://jsfiddle.net/d3R6v/2/
I don't think position: fixed; is a way to go here, instead of using fixed you should be using absolute but before that assign position: relative; to the parent element and modify your #hideMessage as
#hideMessage {
display: inline-block;
padding: 5px 10px;
background-color: #555;
color: #fff;
cursor: pointer;
position: absolute;
right: 50px;
top: 50%;
margin-top: -15px; /* Negate 1/2 the total height of the button,
this value currently is approx */
}
Demo
The reason I insisted position: absolute; is because that it will align related to the parent element whereas using fixed is relative to the viewport.
For more information over positioning, you can refer my answer here
If you have dynamic text
Coming to more cleaner solution, it would be better if you use display: table; for the parent element, and display: table-cell; for the child elements, and for the parent element of the button i.e now display: table-cell;, you can use vertical-align: middle; to vertically align the button to the dynamic text on the left hand side and also on resize, the button won't overlap the text.
Demo 2
#parent {
background-color: #bbb;
color: #fff;
width: 100%;
padding: 10px;
display: table;
}
#text {
width: 80%;
display: table-cell;
}
#hideMessage {
display: table-cell;
color: #fff;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
#hello {
background-color: #555;
padding: 5px 10px;
white-space: nowrap; /* Add if you want to prevent the
button to wrap on resize */
}
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.