I have a parent container(like a pop-up), in which I have a child element appended to parent container. The child element is a div which has some text. I want to center the text inside the div, so that the text remains center aligned in the child div, but the text should align itself vertically as it grows beyond 3-4 lines. I am able to align text vertically as it grows, but when it still is a small text it should be center vertically, which is not happening. I have tried lot of css properties in the child class.
Any help will be good.
.parentclass {
position: absolute;
top: 110px;
left: 165px;
width: 470px;
height: 260px;
text-align: center;
background-image: url(../images/Notification_BG.png); }
.childclass {
position: relative;
position: inherit;
width: 430px;
height: 192px;
left: 50%;
top: 50%;
margin-left: -215px;
margin-top: -96px; /* Negative half of height. */
text-align: center;
text-overflow: -o-ellipsis-lastline;
border: 1px solid blue;
font-family: Arial;
font-size: 28px;
color: white; }
Thanks
KK
have u used vertical-align:middle; ?
try this :
.childclass {
display: table-cell;
vertical-align: middle;
text-align: center;
}
This link will definitely help you:
vertically-center-text-in-a-100-height-div
Use your parentclass display as table and the childclass display as a table-cell and vertical-align:middle will work surely
html
<div class='parentclass'>
<div class='childclass'>Text which is more than two or three lines</div>
</div>
Css
.parentclass {
height: 260px;
text-align: center;
display:table;
}
.childclass {
vertical-align: middle;
width: 430px;
top: 50%;
text-align: center;
text-overflow: -o-ellipsis-lastline;
border: 1px solid blue;
font-family: Arial;
font-size: 28px;
color: black;
}
See this fiddle for demo
Related
So I think the solution I need is to extend the wrapper div to the right of the page without wrapping. If I set the width to width: 100vw or width: 100%, all of the content within the div move below all the other content.
looks kinda weird but here's the fiddle: https://jsfiddle.net/8u3Lzjxw/
what happens if you set width to 100% or 100vh
wrapper should extend to cover all highlighted in green. The height is not a problem as it's not being interfered with.
Relevant HTML:
<div class="active-sockets">
<h1 class="active">Active Sockets</h1>
<div class="wrapper">
<div class="socket">
<h2 class="socket-name">Lorem Ispum</h2>
</div>
</div>
</div>
CSS:
.wrapper {
display: inline-flex;
flex-wrap: nowrap;
float: left;
margin: 0;
width: 100%;
}
.socket {
background-color: rgb(24, 24, 24);
margin: .2em;
padding: .8em;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
width: 100%;
margin: 0;
margin-top: 1em;
}
.active-sockets {
float: left;
margin: 1em;
height: 100vh;
}
.active {
background-color: rgb(24, 24, 24);
color: white;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: .5em;
border-top-left-radius: .25em;
border-bottom-left-radius: .25em;
width: 100%;
}
there are several ways to structure a page like this. To keep inline with what you have, there are a couple CSS properties that need to change in your fiddle.
Since the side-bar has a width of 2em, then the margin of the active sockets needs to be at least 3em. And also, if you want it to snap to the top, then remove the top margin. This is what the style will look like:
.active-sockets {
float: left;
margin: 0 1em 1em 3em;
height: 100vh;
width: 100%;
}
you also want to take away the padding of the side bar:
.side-bar {
background-color: rgb(24, 24, 24);
padding: 0;
width: 2em;
height: 100%;
position: relative;
float: left;
}
I need an editable one line paragraph such that the text inserted into it must not overflow its size.
I'm currently using CSS to try to hide the overflow and also to avoid multiple lines (by not displaying the paragraph's children).
However, ideally I need the text inserted into the paragraph to be "cut" as soon as it would overflow.
This is my code so far (also in JSFiddle):
div
{
width: 50vw;
height: 50vh;
margin: 10px auto;
background-color: gray;
}
p
{
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 25%;
background-color: brown;
text-align: center;
white-space: nowrap;
overflow-x: hidden;
}
/* Avoiding multiple lines */
p *
{
display: none;
}
<div>
<p contentEditable="true">
Edit me! Unfortunally I can be overflowed... :(
</p>
</div>
You can use word-break: keep-all; property in this case
div {
width: 50vw;
height: 50vh;
margin: 10px auto;
background-color: gray;
}
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 25%;
background-color: brown;
text-align: center;
word-break: keep-all;
white-space: normal;
}
p * {
display: none;
}
<div>
<p contentEditable="true">
Edit me! Unfortunally I can be overflowed... :(
</p>
</div>
I would like to have text inside the element to be aligned such that it begins from the bottom of the page. I want it so that as I increase or decrease the width of the div, the text fills up the bottom first before the top.
I want to look like the following design from adobe illustrator:
Instead, it looks like the following:
the code used in the second image is below:
<style media="screen">
*{
font-family: 'Heebo', sans-serif;
}
.big-intro-text{
font-size: 100px;
width: 100%;
position: absolute;
}
.big-intro-text div{
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
</style>
<div class="big-intro-text" align = "center">
<div>home of the zebras</div>
</div>
* {
font-family: 'Heebo', sans-serif;
}
.big-intro-text {
font-size: 100px;
width: 100%;
position: absolute;
}
span {
display: block;
}
.big-intro-text div {
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
<div class="big-intro-text" align="center">
<div><span>home<span> of the zebras</div>
</div>
Try this code.
You could add a large amount of margin on the top, and reduce the div height.
Sorry about the old answer, I did not understand the question.
The issue is with the h5 text not appearing within the div (id=text). if anyone could advise please! Thank you for reading this and taking your time to help!
<div id="footer">
<div id="instagram">
<div id="text">
<h5>Please follow our instagram for future updates !</h5>
</div>
<div id="insta-logo">
<div>
<a class="whitelink" href="https://www.instagram.com/craftyclams/" id="insta"></a>
</div>
</div>
</div>
</div>
CSS code for footer:
Where the div is positioned:
From what I see, your text is inside the div. I set up a jsfiddle for you: https://jsfiddle.net/vfakqg90/
Next time, please provide your CSS, not as a screenshot. I typed your CSS out fully.
If you can, provide your full HTML and CSS so I can take a further look. For now, I don't see a problem according to the jsfiddle I put together for you. The CSS you provided as a screenshot is below for others:
div#footer {
width: 100%;
height: 7%;
background: url("footerbg.jpg");
background-size: 100% 100%;
min-width: 1380px;
background-repeat: no-repeat;
}
div#instagram {
width: 80%;
height: 100%;
margin: 0 auto;
display: table;
table-layout: fixed;
}
div#instagram div#text {
width: 70%;
height: 100%;
padding-top: 15px;
display: table-cell;
}
div#instagram div#text h5 {
font-family: BRUX, serif;
color: #fff;
text-align: center;
font-size: 1.7em;
}
h5 a {
font-family: BRUX, serif;
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 3px;
}
div#instagram div#insta-logo div {
width: 100%;
height: 100%;
padding-top: 30px;
}
#insta {
background: url("logo/insta_icon.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: block;
height: 90%;
text-indent: 100%;
white-space: nowrap;
width: 70%;
max-width: 250px;
max-height: 250px;
}
So i'm trying to center a text in the middle of a div.
I looked half of the website, and it looks like i have to do smthg like that :
.container{
width:100px;
height:200px;
display:table-cell;
vertical-align: middle;
line-height: normal;
}
But it doesn't work...
Here's what i do :
HTML:
<div id="left_bot" class="menu_button"><span class="text_menu_button">Div1</span></div>
CSS:
.menu_button{
width:37%;
height: 44%;
text-align: center;
display: table-cell;
vertical-align: middle;
line-height: normal;
font-size: 48px;
}
#left_top{
top:0;
float:left;
background-color: red;
margin: 2% 1% 1% 2%;
}
But i still have the text in the center, but not in the middle of the div.
I don't get why, i tried to insert the vertical-align on a .text_menu_button but still nothing :x
Thx
The .container should have display: table; and .menu-bottom display: table-cell; to apply table like behavior with CSS.
HTML
<div class="container">
<div id="left_bot" class="menu_button"><span class="text_menu_button">Div1</span>
</div>
</div>
CSS
.container {
height:200px;
display:table;
width: 100%;
}
.menu_button {
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 48px;
}
demo: http://jsfiddle.net/ALB6D/1/
An easy way to center a text vertically is to set the line-height equal to the height.
div { font-size: 30px; line-height: 100px; height: 100px; }
Demo: jsFiddle