As shown in the fiddle here with the following HTML:
<body>
<div class="main_container">
<div class="question">
<p>Test question here</p>
</div>
<input class="answer" type="text">
<input class="submit" type="submit">
</div>
</body>
And CSS:
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
text-align: center;
width: 100%;
font-family: 'Open Sans',sans-serif;
//background-color: rgba(0,150,250,0.75);
}
.question {
border-style: solid;
border-color: rgba(0,150,250,0.75);
border-width: 2em;
background-color: white;
border-radius: 1.618em;
margin: 5em auto;
width: 75%;
height: 10em;
}
.question>p {
border-radius: 1.618em;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.answer {
font-size: 1.618em;
border: 0;
border-radius: 1.618em;
width: 50%;
margin: auto;
}
I am able to get the test question centered if I remove the border-style:solid property of question. However, I am wondering why with border-style it is not centered. I've tried using box-sizing:border-box to no avail.
Thanks
Your Vertical align is messed up because browser applied top bottom margin in p tag, if you removed it this will solve your problem
.question > p {
margin: 0;
}
or
p {
margin: 0;
}
see my updated fiddle here
There is by default margin on p elements, so when there is no border on parent element what happens is margin collapsing on parent-child and that margin doesn't affect position of p. But when you set border (it can be any border as you can see here DEMO) on parent element you prevent margin-collapsing and now you can see margin on p element.
So one solution is to remove margin from p
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
text-align: center;
width: 100%;
font-family: 'Open Sans', sans-serif;
//background-color: rgba(0,150,250,0.75);
}
.question {
border-style: solid;
border-color: rgba(0, 150, 250, 0.75);
border-width: 2em;
background-color: white;
border-radius: 1.618em;
margin: 5em auto;
width: 75%;
height: 10em;
}
.question>p {
background-color: red;
border-radius: 1.618em;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.answer {
font-size: 1.618em;
border: 0;
border-radius: 1.618em;
width: 50%;
margin: auto;
}
p {
margin: 0;
}
<div class="main_container">
<div class="question">
<p>Test question here</p>
</div>
<input class="answer" type="text">
<input class="submit" type="submit">
</div>
Try having the parent div displayed as a table and the p displayed as a table-cell then use vertical-align.
See the below snippet.
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
text-align: center;
width: 100%;
font-family: 'Open Sans',sans-serif;
//background-color: rgba(0,150,250,0.75);
}
.question {
border: 2em solid rgba(0,150,250,.75);
background-color: white;
border-radius: 1.618em;
margin: 5em auto;
width: 75%;
height: 10em;
display: table;
}
.question p {
border-radius: 1.618em;
position: relative;
display: table-cell;
vertical-align: middle;
}
.answer {
font-size: 1.618em;
border: 0;
border-radius: 1.618em;
width: 50%;
margin: auto;
}
<body>
<div class="main_container">
<div class="question">
<p>Test question here</p>
</div>
<input class="answer" type="text">
<input class="submit" type="submit">
</div>
</body>
Just set margin 0px of p tag. Sample is
.question>p {
background-color:red;
border-radius: 1.618em;
position: relative;
top: 50%;
transform: translateY(-50%);
margin:0px;
}
You can use flexbox here:
1.) Add display: flex; and flex-direction: column; to .question
2.) Add margin: auto 0; to .question > p.
3.) Erase everything else except border-radius from .question > p
Here is a fiddle: https://jsfiddle.net/35jhjqcx/
Update inner paragraph positions to absolute and remove the margins
and update outer div of paragraph position to relative
see working fiddle link
.question {
border-style: solid;
border-color: rgba(0,150,250,0.75);
border-width: 2em;
background-color: white;
border-radius: 1.618em;
margin: 5em auto;
width: 75%;
height: 10em;
position: relative;
}
.question>p {
background-color: red;
border-radius: 1.618em;
top: 50%;
margin: 0;
transform: translateY(-50%);
position: absolute;
width: 100%;
}
Related
Here is what I'm trying to do. I have CSS horizontal bar charts. The problem is that I'm trying to get some text before and after. Please see the current screenshot
.forecasting {
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
.forecasting p {
padding: 0;
letter-spacing: 1px;
margin: 0 0 15px;
color: #000;
font-weight: bold;
}
.forecasting p:nth-child(2) {
float: right;
position: relative;
top: -25px;
}
.forecast-bar {
box-sizing: border-box;
background: #fff;
border: #0000CD 1px;
border-style: solid;
}
.forecast-todate {
width: 100%;
height: 15px;
background: #0000CD;
}
<div class="forecasting">
<p>Name of person $30,777,854.19</p>
<p>$30,777,854.19</p>
<div class="forecast-bar">
<div class="forecast-todate" style="width: 90%;"></div>
</div>
</div>
How would I be able to get the Text first, bar chart in the middle, and text at the end.
Is that what you are looking for? Basically I've added flexbox to your main div to put children elements in a row and I gave align-items: center to center them horizontally
.forecasting {
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
}
.forecasting p {
padding: 0;
letter-spacing: 1px;
color: #000;
font-weight: bold;
}
.forecast-bar {
box-sizing: border-box;
background: #fff;
border: #0000CD 1px;
border-style: solid;
width: 80%;
padding-right:20px;
margin-right:10px;
}
.forecast-todate {
width: 100%;
height: 15px;
background: #0000CD;
}
<div class="forecasting">
<p>Name of person </p>
<div class="forecast-bar" >
<div class="forecast-todate" ></div>
</div>
<p>$30,777,854.19</p>
</div>
How can I add a circle on top of two vertical div in HTML? I succeed in having 2 vertical boxes:
but I cannot figure out how to have a circle in the middle like the following:
The goal is to have a white circle with a blue line and being able to add a logo in the circle. I have the following code snippet:
http://jsfiddle.net/wL9xoad3/
.html {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.body {
background-color: #000;
font-family: "Open Sans", sans-serif;
height: 100%;
}
.vidyard_padding {
height: 100%;
}
.vc {
display: table;
height: 100%;
width: 100%;
}
.vc-inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.cta {
background-color: #fff;
height: 360px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 640px;
}
.cta-full {
height: 100%;
width: 100%;
}
.cta-half {
float: left;
height: 100%;
width: 50%;
}
.cta-block {
display: table;
height: 100%;
width: 100%;
}
.cta-block-inner {
display: table-cell;
padding: 20px;
text-align: center;
vertical-align: middle;
}
.cta-block p {
line-height: 1.4125;
margin: 0;
}
.cta-block p.white {
color: #FFFFFF;
}
.cta-block p+.btn {
margin-top: 10px;
}
.cta-block .btn {
background-color: #414142;
border-radius: 2px;
color: #FFFFFF;
display: inline-block;
font-size: 10px;
letter-spacing: 1px;
padding: 8px 12px;
text-decoration: none;
}
.cta-block .btn:hover {
background-color: #313132;
}
<div class="cta-half">
<div class="cta-block" style="background-color:#FFFFFF;">
<div class="cta-block-inner">
<p class="black">Watch our Quick Start</p>
<a class="btn" href="https://google.com">Quick Start</a> </div>
</div>
</div>
<div class="cta-half">
<div class="cta-block" style="background-color:#47b2ffff;">
<div class="cta-block-inner">
<p class="white">Start in the Cloud</p>
<a class="btn" href="https://google.com">Cloud</a> </div>
</div>
</div>
You can use a ::before or an ::after pseudo element with an empty content and some positioning. You can set the width and height of the new element and add some border-radius to make it a circle. Don't forget to set position: relative on the .cta-half element so you can move the circle relative to this.
You can add the following to your snippet on jsfiddle, it should work:
.cta-half {
position: relative;
}
.cta-half:last-of-type::after {
background-color: #fff;
border-radius: 50%;
border: 2px solid #47b2ff;
content: '';
height: 50px;
left: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
}
If you want to add a logo in the circle, you can update your content and add a url(). I'd probably grab the svg version of the logo and encode it using this tool. It will convert the image and use it like this:
content: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 533.5 544.3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z' fill='%234285f4'/%3E%3Cpath d='M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z' fill='%2334a853'/%3E%3Cpath d='M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z' fill='%23fbbc04'/%3E%3Cpath d='M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z' fill='%23ea4335'/%3E%3C/svg%3E");
You can also add some padding to make the logo smaller.
Result:
https://jsfiddle.net/magnix2k/z1sx03by/1/
I'm trying to align the icons in buttons with the labels and the text next to the button aligned in line perfectly. CSS codes I wrote - 'top: 0;', 'padding: 0;', 'display: block;', 'display: inline-block; and 'vertical-align: middle;' these didn't work for me. What am I missing?
HTML
<div class="service-wrapper">
<div class="services">
<div class="button1"><img src="http://www.evergreenwealthformula.com/new/wp-content/uploads/2017/02/Tech-Support-Icon-3.png" class="iconBtn1">TECHNICAL SUPPORT</div>
<div class="text1"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button2"><img src="http://www.evergreenwealthformula.com/new/wp-content/uploads/2017/02/Tech-Support-Icon-3.png" class="iconBtn2">CUSTOMER SERVICES</div>
<div class="text2"><p>For questions about applying for producing, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body, #container {
font-size: 18px;
margin: 0;
padding: 0;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 18px;
font-size: 14px;
}
div {
padding: 0;
margin: 0;
}
.service-wrapper {
width: 100%;
background-color: #000000;
}
.services {
width: 50%;
display: flex;
margin: 0 auto;
border: solid #ff0000 1px;
}
.text1 {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button1 {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
}
.text2 {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button2 {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
}
.iconBtn1{
max-height: 60%;
max-width: 60%;
}
.iconBtn2{
max-height: 60%;
max-width: 60%;
}
It's probably not the best solution but this certainly works:
.button1 img,
.button2 img {
transform: translateY(5px);
-ms-transform: translateY(5px);
-webkit-transform: translateY(5px);
}
Your code with my code implemented: https://jsfiddle.net/z1sx03by/3/
In .button1 and .button2 remove text-align: center and add display: flex, justify-content: center, align-items: center
https://jsfiddle.net/z1sx03by/4/
Since the buttons will be styled identically, you should create one common class and apply it to all. No need to create duplicate classes for each. Give it a shot... Hope this helps! :)
You were close with the display:flex css property. Just needed to tweak a little. Also, no need to add different class names if they are going to have same style property.
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body, #container {
font-size: 18px;
margin: 0;
padding: 0;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 18px;
font-size: 14px;
}
div {
padding: 0;
margin: 0;
}
.service-wrapper {
width: 100%;
background-color: #000000;
}
.services {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border: solid #ff0000 1px;
}
.text {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px 10px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="service-wrapper">
<div class="services">
<div class="button"><img src="http://via.placeholder.com/20x20" class="iconBtn">
<span>TECHNICAL SUPPORT</span></div>
<div class="text"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button"><img src="http://via.placeholder.com/20x20" class="iconBtn"><span>CUSTOMER SERVICES</span></div>
<div class="text"><p>For questions about applying for producing, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
Vertical centering in CSS is relatively straight forward. This is the code I'm using.
position:relative;
top:50%;
transform:translateY(-50%);
1) This works great for centering multiple shapes next to each other.
2) It works great for centering multiple words next to each other.
However oddly enough when I place a centered shape next to a centered word it goes haywire. Is there an obvious, or not so obvious reason for this? How do I fix it?
I created a fiddle so you can see the result. https://jsfiddle.net/9h1pfpns/
Here is my code:
.container {
height: 200px;
margin: 10px;
border: 4px solid #754419;
}
.shape {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 250px;
height: 100px;
margin-left: 10px;
background-color: aquamarine;
}
.text {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
font: bold 1.25em Arial, Helvetica, sans-serif;
margin-left: 10px;
border: 1px solid #754419;
}
<div class="container">
<div class="shape"></div>
<div class="text">first</div>
</div>
You can change the CSS for text to:-
.text {
display: inline-block;
position: relative;
margin: 0 auto;
font: bold 1.25em Arial, Helvetica, sans-serif;
margin-left: 10px;
border: 1px solid #754419;
}
Just to clarify I removed the following CSS:-
top: 50%;
transform: translateY(-50%);
And added:-
margin: 0 auto;
Check out the jsFiddle https://jsfiddle.net/01kkavf4/
* Update *
You can also replace:-
top: 50%;
transform: translateY(-50%);
With:-
top: 10%;
transform: translateY(-50%);
jsFiddle of both:-
https://jsfiddle.net/01kkavf4/
The second resolutions fits better with your box.
Just a few different ways.
It doesn't work because, before offsetting with relative positioning and transforms, the elements are not aligned to the top. The default is vertical-align: baseline.
Just add vertical-align: top.
.container {
height: 200px;
margin: 10px;
border: 4px solid #754419;
}
.item, .text {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 10px;
vertical-align: top;
}
.item {
width: 250px;
height: 100px;
background-color: aquamarine;
}
.text {
font: bold 1.25em Arial, Helvetica, sans-serif;
border: 1px solid #754419;
}
<div class="container">
<div class="item"></div>
<div class="text">first</div>
</div>
Anyways, I recommend against this approach because in case the container is shorter than the contents, they will overflow above and below. But you won't be able to scroll to see the above overflow.
Instead, I recommend flexbox with auto margins.
.container {
height: 200px;
margin: 10px;
border: 4px solid #754419;
display: flex;
}
.item, .text {
margin: auto 0 auto 10px;
}
.item {
width: 250px;
height: 100px;
background-color: aquamarine;
}
.text {
font: bold 1.25em Arial, Helvetica, sans-serif;
border: 1px solid #754419;
}
<div class="container">
<div class="item"></div>
<div class="text">first</div>
</div>
The following code is part of a custom 404 page I am planning on using on a website of mine. However there is a major problem when I add the line of code overflow-y: auto;
The code below has the output which I expected it to. However when it the code inside the div reaches more than 75vh the overflow is not visible.
* {
margin: 0;
padding: 0;
}
.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}
.center {
float: left;
position: relative;
left: 50%;
}
.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}
.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}
.prep {
align: center;
background: #00eaff;
outline: none;
padding: 8px;
color: white;
border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
}
pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}
<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>
<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>
In order to fix this problem I added the line overflow-y: auto; in .extra class. This is what caused a problem. When you run the code below half of the output is "missing". I am unsure of why this is occuring.
* {
margin: 0;
padding: 0;
}
.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}
.center {
float: left;
position: relative;
left: 50%;
}
.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}
.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}
.prep {
align: center;
background: #00eaff;
outline: none;
padding: 8px;
color: white;
border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
}
pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}
<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>
<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>
I would appreciate any help in fixing this problem.
Half of the output goes "missing" due to the left positions defined in center and wrap classes.
center class will position your container starting from 50% and then, the inner container (wrap) gets repositioned again with -50%. Since the overflow is applied on the parent div, half of the content is no longer visible.
One solution might be to move overflow-y: auto; to wrap class.
Another is to choose another way to center infoCont div.
<div id="infoCont" class="extra">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
margin: 0 auto; /* set margin to auto */
left: 0; /* set also left and right because position is fixed */
right: 0;
}
See working example.