Following an example found over at CSS Tricks, I'm trying to center align content that is inside a circle container that is responsive. The example doesn't seem to be able to handle much content, and immediately breaks as soon as I enter more than a few lines of text.
Code Pen Example
Inside the circle I need to have a header and a paragraph. Is there any way to set a max width of this content so that it isn't placed outside the circle when it doesn't fit?
You can set top value accordingly in your .content code pen
Edit
Do this changes:
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
}
.content span{
display: table-cell;
vertical-align: middle;
text-align: center;
}
Now short text or long text that all will be centered now.
check this
Related
I have two divs inside a container div using display: flex. One div is meant to simply contain text, and center it as closely to the center as possible. The other div contains responsive content (and image in the demo provided) that basically defines the height of the flex.
The first child div, contains layers of divs to emulate a table using display: table and display: table-cell, along with a height: 100% and vertical-align: middle. Before anyone mentions, I can't use an actual <table> due to problems with it supporting position: relative which my actual site utilizes.
In Firefox and Edge, everything loads as expected and works perfectly (or rather as good as Edge can muster). However, in Chrome, the div using display: table refuses to acknowledge it's height: 100%.
Here is a demo of my problem
Using table tags (or display:table) for layouting purposes is wrong. You should only use tables for displaying tabular data.
What you want can be achieved with these mods to your CSS:
.flex-box {
position: relative;
}
.table {
position: absolute;
width: 100%;
height: 100%;
}
.table .table-cell {
display: block;
text-align: center;
top: 50%;
transform: translateY(-50%);
position: relative;
width: 100%;
max-height: 100%;
overflow-x: hidden;
}
The "cell" is now centered both horizontally and vertically. And it gets a vertical scrollbar if the content overflows the box.
Here's the updated fiddle.
I have a page that has an image which contains text in it. There is a text outside of the image that needs to be right-aligned with the text within the image. I've tried handling this with percentages which worked for some sizes, but not for all.
Trying to figure out if there is an easy way to do this that works for all and for responsive layout too.
Example:
How's this for you? https://jsfiddle.net/n451c4ym/2/ the "bottom" css property would need to be adjusted - but with that setup the right hand side of the text remains inline with the fixed text on the image...
Basically you give the parent a position of relative:
.imageContainer{
position: relative;
width: 100%;
}
and make the text a child of that container (along with the image). Then by making your html text width 100%, it should scale at the same proportions as the image (and in turn the fixed image text):
.imageContainer img{
width: 100%;
}
.text{
color: #fff;
display: block;
position: absolute;
bottom: 50%;
padding-right: 7vw;
right: 0;
text-align: right;
width: 100%;
}
I have been trying to align image inside a div vertically but it seems impossible to me
I have tried to give anchor a of img these styles
vertical-align: middle;
line-height: 190px;
Here is the link to my Fiddle
I have acheived these things that image height should never get more than the DIV and its width should never be less than the width of DIV
Can someone correct me how do I get this image in middle vertically?
Update:
Here it is on my live site
http://www.wholesalerhinestones.org/testtest.html
just add
vertical-align: middle;
to the image, here's the Updated Fiddle
Edit
for your live site, change the style of .link_image to
.link_image {
width: 212px;
height: 190px;
display: table-cell;
background-color: red;
vertical-align: middle;
}
and for .transfers_image, remove the display: inline-block;. It's not needed
I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).
Example: http://jsfiddle.net/VrfAU/4/
Edit: I've made some images to try and make this more clear.
Small content
Large Content
I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).
http://jsfiddle.net/UYpnC/5/
Try something like this:
.main { min-height: 500px }
http://jsfiddle.net/VrfAU/8/
I used the css property z-index, which controls the stack order to fix this:
I also used position: fixed to fix the header and footer:
I put
#header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}
.main_wrap {
display: table;
width: 100%;
height: 100%;
margin-top: -88px;
vertical-align: middle;
position: relative;
z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}
I have designed a website and am a little bit stumped right now.
If you view the website at:
http://www.noxinnovations.com/portfolio/charidimos/
If you change the size of the window you will notice the Navigation overlaps the logo/header.
Anyway to change this? What I want to do virtually is to make the window have a scroll bar appear if that is possible.
Any ideas?
Thank you :-D.
It's your width: 100%; in your #header element that's causing your strange overflow behavior. Place your #logo and #navigation elements inside of another div with a fixed height and width that sits inside of the #header, then give your #header the property overflow: hidden; and that should fix you right up.
If you want your navigation not to overlap, you can do the following
#navigation {
width: 500px;
height: 100px;
padding-top: 52px;
position: fixed; // CHANGE FROM RELATIVE TO FIXED
left: 770px; // ADD THIS BIT OF POSITIONING (ADJUST AS NECESSARY)
float: right; //REMOVE THIS FLOAT
text-align: center;
vertical-align: middle;
}