I have my heading with arrow ::after element. After element is positioned absolute with margin-left:10px, but when i shrink down website the element wraps with text down.
Is there a way for arrow to always stick to top right of heading no matter what width of device like this?
Tried with display inline but it doesnt work. Any idea if it's possible?
I'd wrap the heading in another element and use the ::after pseudo-element of the parent. In my example, I used a <div> with display: inline;, and set the heading's margin-right to 1em to account for the width of the ::after element. My code probably isn't too different from yours, just uses different selectors.
CodePen here: https://codepen.io/the_Northway/pen/GRMyrLR
Edit: adding the Stack Snippet by suggestion - codepen is still useful to change screen size though.
div {
position: relative;
display: inline;
text-align: center;
}
div h3 {
margin-top: 0;
margin-right: 1em;
}
div::after {
position: absolute;
display: block;
width: 1em;
height: 1em;
content: ">";
color: red;
top: 0;
right: 0;
}
body {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
<div><h3>Looking for help?</h3></div>
Related
I have an <div> container with an <img> and an ::after pseudo-element. Like so:
<div class="container" data-caption="this caption should be as wide as the image and then wrap">
<img>
</div>
.container {
display: inline-block
}
.container::after {
display: block
background: #aabbaa
content: attr(data-caption)
line-height: 40px
padding: 0 1rem
}
The container should get its width from the contained image while the ::after element should wrap its content accordingly, like this:
Instead the after element does not wrap - see this codepen.
Edited for dynamically inheriting from the image rather than the text use max-width: min-content:
.container
display: inline-block
border: 1px dashed red
max-width: min-content
&::after
display: block
background: #aabbaa
content: attr(data-caption)
line-height: 40px
padding: 0 1rem
white-space: wrap
You can use some positioning hacks, with a relative parent and absolute pseudo element. See here:
https://codepen.io/palash/pen/dJabRr
Also, white-space: wrap doesn't exist, it's white-space: normal that you are looking for, and it's is the default value. (nowrap does exist, though.)
.container
position: relative
...
&::after
...
position: absolute
left: 0
right: 0
Edit: If you don't want to use absolute positioning (so that border comes around the caption too), you can use flexbox to do it –
Updated pen: https://codepen.io/palash/pen/BYyXjq
.container
display: flex
flex-direction: column
align-items: flex-start
width: min-content
...
&::after
background: #aabbaa
content: attr(data-caption)
line-height: 40px
padding: 0 1rem
I'm trying to center a text element and then have an explanatory "what is this?" next to it. However when I type in the "what is this?" part, it obviously moves the original text element off center. Is there a way to fix this using CSS or HTML?
You can wrap the text-element that needs to be centered in a div and style position:absolute to that div using CSS.
Here is an example without having to assign width to any elements. This should work fine with any length of text thrown at it.
http://codepen.io/ay13/pen/GJKawz
HTML and CSS:
h1 {
text-align: center;
}
h1 a {
position: absolute;
margin-left: 10px;
}
<h1>
<span>Centered Text What is this?</span>
</h1>
Here's an example of how you can do it:
http://jsfiddle.net/wgbs4asv/1/
You basically need to have the right-side "what is this?" div inside of the main div (and before the main div's content), but with the right-side "what is this?" div's CSS set to:
float: right;
width: 100px;
margin-right: -100px;
position: relative;
(but using whatever width you want, and with a negative margin-right to match the width). The width would offset the main div's position, but then the negative margin with the position: relative brings it back.
It will be better if you share your code.
but anyway, you will need to position the text relative and then add the explanatory in it and position it to absolute, here is the code to make things clear.
.parent {
width: 80%;
background: lightblue;
display: flex;
justify-content: center;
}
.container {
position: relative;
display: flex;
justify-content: center;
width: 80%;
height: 80px;
background: lightslategrey;
border: 1px solid red;
}
.text {
position: relative;
width: fit-content;
background: lightcoral;
text-align: center;
}
.explanatory {
width: max-content;
position: absolute;
z-index: 10;
color: white;
}
<div class="parent">
<span class="container">
<p class="text">text text text
<span class="explanatory">what is this?</span>
</p>
</span>
</div>
This code leaves this weirdly shaped border (it's the active link border) when you click the image, like so:
And when we put an orange background on the <a> element we see that there's an orange area underneath the image. So, <a> wraps around the image, but also around an area underneath it.
Why does <a> do that?
First, by default element has an 'outline' decoration, to disable it use the following css rule:
a { outline: 0 }
Second, the area is created by another css property you apply on the image itself: 'margin', which is the margin between the image to the elements around it, in this case it affects the element which wraps it, to fix that change the following rules:
.socialBtn {
/* Removed margin here so there won't be space around image */
height: 2.5em;
width: 2.5em;
}
a {
height: 2.5em; /* Gave it width like the image */
width: 2.5em; /* Gave it height like the image */
display: inline-block; /* Made it inline-block so it can have width and height */
}
http://jsfiddle.net/we67Lp6o/6/
UPDATE:
Changing source to understand how the display property: block vs inline-block vs inline.
Removed "outline: 0" from a selector, it is a bad practice, read why here.
It's actually not spacing underneath at all. It's because your a tag is collapsed due to the default setting of display:inline. Adding display: inline-block to those as will fix that issue:
FIDDLE
Alohci offers a great explanation on why this happens
UPDATE
The extra spacing is the margin on the img:
.social a {
display: inline-block;
background-color: orange;
padding: 0;
margin: 0;
vertical-align: top;
}
.socialBtn{
height: 2.5em;
width: 2.5em;
padding: 0;
margin: 0;
vertical-align: inherit;
}
NEW FIDDLE
The spacing answer can be provided here
inline-blockis the property you need for the <a> elements. For the spacing issues, the margins need to be removed.
The reason for the strangely shaped border, is of the outline property on <a>. It's showing you the area of your link, but due to the display and margin properties it is a different size than your img.
Here is the new CSS:
.header {
width: 650px;
height: 150px;
clear: left;
margin: 0px auto;
background-color: #efefef;
position: relative;
border-radius: 4em 4em 0 0;
}
.social{
padding: 1em 2em 0 0;
display: inline-block;
position: absolute;
right: 0;
}
.socialBtn{
height: 2.5em;
width: 2.5em;
}
img {
display: block;
}
a {
display: inline-block;
background-color: orange;
}
http://jsfiddle.net/Lg5a0ksg/4/
Set your images to display: block (or alternatively, to vertical-align: bottom) to remove the default space at the bottom. (By default, images align to the baseline of any potential text next to them, and they leave that space there even if there's no text beside them.)
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 */
}
How do you center an image with text inside a block?
I know you can center a block inside another block by giving the latter a fixed width and margin: auto. However, I don't know the dimensions of text beforehand (actual text content may vary).
The CSS I have got so far:
.outer {
width: 400px;
}
.outer table {
border: 0;
width: 100%;
}
.outer table td {
vertical-align: middle;
text-align: center;
}
.outer table td p {
text-align: left;
}
Please take a look at this DEMO
Here is my css:
.block {
text-align: center;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
.left {
float: left;
}
Explanation about :before element:
This is an invisible element pseudo element, which is used for better vertical centering: it emulates a 0-sized inline-block element, which, in conjunction with normal inline-block element (.centered) allows us to use vertical-align.
UPDATE:
You can set height to .block to see how it will be centered vertically:
http://jsfiddle.net/jb5EJ/5/
UPDATE 2: Is this closer: http://jsfiddle.net/jb5EJ/13/
Checkout this link. I hope you will get the solution.
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
TLDR: with only this CSS you can position an element in absolute center (both horizontally and vertically):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Add vertical-align:middle; to img too....also, i would suggest to add height to outer class
<img src="some_src" style="vertical-align:middle;" /> I have some text too
demo to get u started