The problem I am trying to solve in my project:
I want to have the selected state of a link in my navbar be a small icon.
I want that icon to sit directly below and in the middle of the navbar link text.
I can't seem to figure it out.
I mimicked some of the css in the project below.
Essentially I am trying to get the text "trying ma best" centered in the middle of the parent "center the text below me relative".
All of our nav links sit inline, so I don't want to alter the a tag being inline.
https://jsfiddle.net/6Lk1uqs8/5/
here is the code in the fiddle:
<a href="#">
center the text below me relative to me
<div>
trying ma best
</div>
</a>
a {
display: inline;
}
div {
display: inline;
position: relative;
top: 15px;
right: 50px;
}
Any help is greatly appreciated.
You can use relative and absolute position to achieve the desired results.
a {
display:inline;
position:relative;
}
div {
position: absolute;
top: 15px;
width:100%; /* instead of this you can use left:0; right:0 also */
text-align:center;
}
a {
display:inline;
position:relative;
}
div {
position: absolute;
top: 15px;
width:100%;
text-align:center;
}
<a href="#">
center the text below me relative to me
<div>
centere insdff
</div>
</a>
You can do it easily with the Flexbox:
a {
display: inline-flex; /* takes only the contents width; you can also use "flex" (100% width) */
flex-direction: column; /* stacks flex-items (children) vertically */
align-items: center; /* centers them horizontally */
}
<a href="#">
center the text below me relative to me
<div>
trying ma best
</div>
</a>
not full proof but could be a good starting point. https://jsfiddle.net/p1er4t2p/
a {
display: inline-block;
border:1px solid black;
}
a:after {
visibility:hidden;
content:'center';
display: inline-block;
position: relative;
display:flex;
justify-content:center;
border:1px solid blue;
}
a:hover::after{
visibility:visible;
}
<a href="#">
center the text below me relative to me
</a>
You could do the following css
a {
display: inline;
position: relative;
}
a div {
display: inline;
position: absolute;
top: 15px;
width:100%;
text-align:center;
}
PS:div inside anchor tag is not good method Is putting a div inside an anchor ever correct?
Related
I have the following code. It is set up so that the images are responsive (scale with the window size) and positioned centrally, both horizontally and vertically. It was working fine until I wanted to add several images stacked on top of each other to play as a slideshow (fade-in, fade-out). I had to position the img tags "absolute". And it obviously collapsed the parent divs. Basically I want an alternative method to stack images on top of each other without using absolute positioning.
<div class="container">
<div class="main-picture-wrapper">
<div class="main-picture">
<img id="front" src="img/VR-front.png" class="">
<img id="side" src="img/VR-side.png" class="">
</div>
</div>
</div>
.container {
height:100%;
text-align: center;
font:0/0 a;
}
.container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main-picture-wrapper {
margin-top: 70px;
display: inline-block;
vertical-align: middle;
font-size: 16px/1;
width:70%;
left:0;
}
.main-picture {
width:100%;
position: relative;
text-align: center;
}
.main-picture img {
position: absolute;
width:100%;
top: 0;
left: 0;
}
As k185 suggested, flexbox is the way, along with absolute positioning. As today it's compatible with most of browsers.
Keeping your markup and style, a good starting point could be something like this:
html, body {
height: 100%;
}
.main-picture {
...
display: flex;
align-items: center;
justify-content: center;
}
.main-picture img {
position: absolute;
}
https://jsbin.com/sinayiloge/edit?html,css,output
If you don't have compatibility problem, you can always use flexbox solutions. You can check this website, it has some good examples
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to create a header for my website, however I am trying to figure out the best to way align it.
The header is something along the lines of "Welcome to SHEP at the University of XXXX". However, I am trying to make the sentence be centered around the word "SHEP". In other words, I'm trying to make the "SHEP" portion of the sentence be dead-center on the page.
I've tried a few methods such as <h1>Welcome to <span> SHEP </span> at the University of XXX</h1> and setting the span to align center, however I can't quite get it working.
I'm looking to achieve the look as displayed in #1, not #2:
HTML:
<div class="container">
<h1>
<span>Welcome to</span>
SHEP
<span>at the University of XXX</span>
</h1>
</div>
CSS:
.container {
display: block;
text-align: center;
}
h1 {
position: relative;
display: inline-block;
text-align: center;
}
span {
position: absolute;
top: 0;
white-space: nowrap;
}
span:nth-of-type(1) { right: 100%; }
span:nth-of-type(2) { left: 100%; }
See Fiddle
Use display:table for a wrapper div and then display:table-cell for the child elements. They'll take up the width of the wrapper evenly. So, your markup would be something like this:
HTML
<div id="nav-wrap">
<div id="nav-left">
<p>Welcome to</p>
</div>
<div id="nav-center">
<p>SHEP</p>
</div>
<div id="nav-right">
<p>at the University of XXX</p>
</div>
</div>
CSS
#nav-wrap {
display:table;
width:100%;
}
#nav-wrap > div {
display:table-cell;
text-align:center;
border:1px solid black; /* here to show how the cells are aligned */
width:33%;
}
Of course, you would style your text within each child div accordingly.
http://codepen.io/bbennett/pen/zxKZLb
Create space with in the span using padding and it will give the appearance that the text is centered:
span{
padding: 0 10px;
}
You could use margin, for instance:
span {
margin: 25%;
}
http://jsfiddle.net/yjw0t27r/1/
you can use pseudo element :before and :after and position it using absolute now h1 is aligned from the Shep word
div {
text-align: center
}
h1 {
display: inline-block;
position: relative;
border: 1px solid red;
}
h1:before {
content: 'Welcome to ';
position: absolute;
right: 50px;
width: 238px;
}
h1:after {
content: ' at the University of XXXX';
position: absolute;
left: 50px;
width: 434px;
}
<div>
<h1>SHEP</h1>
</div>
Your best option is to give the header tag the following:
h1{
display: inline-block;
position: relative;
left: 50%;
margin-left: -120px;
}
Margin-left should be set to whatever the width of the first half of the header is. So, if 'Welcome to SH' is 120 pixels wide, then put that as the negative margin left. Essentially, you're pushing the header 50% away from the left side, then moving it back however many pixels using 'margin-left'.
codepen here: http://codepen.io/anon/pen/KwgWQo
I assume you only want to center horizontally.
My solution utilizes flexbox with justify-content: center to align the items centered within the container. The items are the three components of the headline: text before, "the word", text after.
HTML:
<h1 class="word-centered"><span>Welcome to the great </span><span>Stackoverflow</span><span> universitiy</span></h1>
The headline is split into its three parts, the centered word in the second span.
CSS:
/* make the items flex (in a row by default); center the items in the container */
.word-centered {
display: flex;
justify-content: center;
}
/* make the left and right part use all remaining space; padding to space the words */
.word-centered span:nth-child(1), .word-centered span:nth-child(3) {
flex: 1;
margin: 0 5px;
}
/* since the first span uses all space between the middle item and the left edge, align the text right */
.word-centered span:nth-child(1) {
text-align: right;
}
Demo: http://jsbin.com/foduvuvoxa/1
This works in FF 34 and Chrome 39 out of box, requires vendor prefixes for IE 10/11.
I'm trying to add an icon next to a centered text on hover, wo centering both text and icon. I want the icon to be placed directly after the centered element. Picture should explain it. Preferably I would like to use flexbox. This is what i currently have: http://jsfiddle.net/TmdZ3/
HTML
<div class="container">
<span>Label</span>
<i>icon</i>
</div>
CSS
.container {
height: 150px;
width: 150px;
border: 5px solid grey;
display: flex;
align-items: center;
justify-content: center;
}
i {
display: none;
}
.container:hover > i {
display: flex;
}
You'll have to make a small change to your markup and put the icon inside the span to then position it relative to its parent:
http://jsfiddle.net/TmdZ3/1/
span {
position: relative;
}
i {
display: none;
position: absolute;
top: 0;
right: -30px;
}
Note that the right: -30px; would have to be adjusted according to your icon's size and spacing to the span.
You should create a new span, make its position to be absolute, keeping relative to its immediate parent and then he would get what he is looking for on hover.
WORKING DEMO
The Code:
<div class='wrapper'>
<span>Label</span>
</div>
.wrapper{
padding:20px;
border:4px solid grey;
display:inline-block;
color:black;
font-size:22px;
font-family:verdana;
position:relative;
width:100px;
height:30px;
}
span{
padding:0 20px;
color:black;
text-decoration:none;
position:absolute;
}
Hope this helps.
What have you tried at present? Have a look at this FIDDLE which expands on the code example below.
This should be done by setting the background of the :hover css to something like:
background-image:url(myicon.png);
background-repeat:no-repeat;
background-position:right center;
The the regular link css to something like
padding:0 15px;
I have a div in a list item which is floated right. The div positions it self at the top right corner of the list item. Is it possible to position it in the middle-right without the use of padding or margins?
---------------
DIV
---------------
Needs to be:
---------------
DIV
---------------
I made a bunch of assumptions and didn't bother check this first.
li {
height: 32px;
}
li div {
width: 100%;
line-height: 32px;
text-align: center;
}
You could use the table cell method.
<div class="wrap one">
<div class="inner-wrap">
<div class="inner">Test</div>
</div>
</div>
With the CSS defining a parent as a table, then table-cell with vertical align:
.wrap .inner {
background: white;
float: right;
}
.wrap.one {
display: table;
width: 100%;
}
.wrap.one .inner-wrap {
display: table-cell;
vertical-align: middle;
}
Demo: http://jsfiddle.net/vFqSC/
If you want the div to take up the full space you could position the div this way:
li div {
float: right;
height: 100%;
}
or if you don't want it to take up the full space
li div {
position: absolute;
right: 0px;
top: 50%;
height:80%;
margin-top:-40%; // Half of height
}
If you have a hard coded list height and div height:
li { height: 50px; }
li div {
position: absolute;
right: 0px;
height:30px;
top: 10px;
}
There are many ways to do this, you should provide more information on how you want it to behave and look
Yes, you can, but margin or padding is the preferred method, but you could use relative positioning and assess a amount along on vertical axis. fiddle: http://jsfiddle.net/De4CV/1/
div {
width:200px;
height:200px;
background:#333;
}
div p {
font:1em normal Futura, sans-serif;
color:#f5f5f5;
text-align:right;
position:relative;
top:90px;
}
<div class="div">
<p>Hello there!</p>
</div>
How can I center absolute positioned text inside fluid relative parent? I'm trying to use text-align:center on parent elements but it always centers child's left corner, not element itself.
http://jsfiddle.net/sucTG/2/
The thing is that position:absolute; modifies the element's width to fit its content, and that text-align: center; centers the text within the element block's width. So if you add a position: absolute; don't forget to increase the width of the element, or else the text-align: center; property will be useless.
The best way to solve this is to add a width: 100%; and a left: 0px; in the .text section.
http://jsfiddle.net/27van/
You can now achieve what you want more elegantly with flex. See for example:
HTML:
<div class="container">
<div class="text">Your text</div>
</div>
CSS:
.container {
position: relative;
width: 400px; /** optional **/
height: 400px; /** optional **/
background-color: red; /** optional **/
}
.text {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center; /** Y-axis align **/
justify-content: center; /** X-axis align **/
}
Update: What I put before was bad/wrong
http://jsfiddle.net/brJky/1/
This should be MUCH closer to what you want?
Your text is relative and your other elements inside the container are absolute!
.text {
color:#fff;
padding:50px 0;
display:block;
position:relative;
}
.absolute {
background:#f0f;
height:25px; width:25px;
position:absolute;
top:36px; left:50%;
}