The page is in HTML and I've been trying with CSS with but can't get it right.
This is where i 've been :
.box3 {
background-color:yellow;
width:200px;
height:200px;
margin:20px auto;
border-radius:100% }
follow this
.box3 {
width:200px;
height:200px;
line-height: 200px;
border-radius:100% ;
font-size: 20px;
color: #fff;
text-align: center;
background-color:yellow;
margin:20px auto;
}
<div class="box3">Hello I am A Circle</div>
Related
I have the following CSS list definition:
a {
background-color: black;
display:block;
border-radius: 50%;
text-align: center;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
}
Which results in this kinds of buttons:
I would like the text to be right in the middle of those circles instead. Is that possible?
Try to span an element. Try this.
Working codepen example: https://codepen.io/anon/pen/ePMdrL
a{
background:black;
color:#fff;
width:100px;
height:100px;
display:inline-block;
text-align:center;
position:relative;
border-radius:100%;
}
a span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
<span>Link</span>
instead of display:block; this:
a {
/* display:block; <- delete this */
/* put this instead */
display:flex;
align-items:center;
}
reference material:
https://developer.mozilla.org/en-US/docs/Glossary/Flex
You could use the line-height property. Working Codepen example.
.circle {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
background: black;
color: white;
text-align: center;
}
You can use custom list style, for instance:
ul.leaf {
list-style-image: url('/images/leaf_icon.jpg');
}
I'm trying to fix my website main logo. The name is Cerebro Design, and I would like to put Cerebro up and Design down, exactly like this:
This is the CSS code I have so far:
<div style="margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#000;">
CEREBRO DESIGN
</div>
#logo{
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:80px;
color:#fff;
text-align:center;
background:#000;
}
#logo-text{
margin-left:70px;
padding-top: 160px;
max-width:30px;
}
<div id="logo">
<div id="logo-text">CEREBRO DESIGN.</div>
</div>
Then you just add the correct font and you should be good to go.
As a note, is better to use external or internal (<style>...</style>) css than using style="..." on an element.
i would use an image for the logo, but if you want to go css way, this could work for you.
Demo
div {
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#000;
display: inline-block;
position: relative;
overflow: hidden;
}
div:before, div:after{
display:inline-block;
position: absolute;
color: white;
font-size: 95px;
width:500px;
height:500px;
text-align: center;
left: 0;
}
div:before{
content: 'CEREBRO';
top: -10%;
}
div:after{
content: 'DESIGN.';
top: 10%;
}
Can you share the font you are using? My quick aproach (I'm in a small laptop) would be something like this:
HTML:
<div class="cerebro-logo">
<span class="padding">Cerebro
<span class="design-text">Design .</span>
</span>
</div>
CSS:
.cerebro-logo {
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:70px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-weight: 600;
color:#fff;
line-height:80px;
letter-spacing: 10px;
text-align:left;
background:#000;
text-transform: uppercase;
}
.padding {
padding-top: 165px;
padding-left: 50px;
float: left;
}
.design-text {
letter-spacing: 13px;
}
Tip: You can use letter-spacing (for example) to get that spacing effect on the "Design .".
JSFIDDLE link: http://jsfiddle.net/f5qrbbx5/
Just add your text, no need to calculate any margin or padding.
.circle {
width: 500px;
height: 500px;
margin: 20px auto;
background: #000;
border-radius: 50%;
color: #fff;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 94px;
text-align: center;
white-space: nowrap;
}
.circle:before {
content: '';
display: inline-block;
height: 100%;
margin-right: -0.25em;
vertical-align: middle;
}
.circle > * {
display: inline-block;
max-width: 80%;
text-align: left;
vertical-align: middle;
white-space: normal;
}
<div class="circle">
<span>CEREBRO<br>DESIGN.</span>
</div>
I have tried the normal techniques for horizontally centering a div within a div. I must still be doing something wrong. Check out the following jsFiddle and help me center the depiction of a tank under the "Inner Level" heading. For convenience I have added a border to all the div tags.
jsFiddle Source
HTML:
<body>
<a href="#">
<div class="div-inline-block" style="text-align:left;width:150px;">
<h2>TEST</h2>
<p>A description</p>
</div>
<div class="div-inline-block"><p><b>Last Update:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Flow Rate:</b><br />??? gpm</p></div>
<div class="div-inline-block"><p><b>Inner Level:</b><br />???</p><div class="tank-level-outer"><div class="tank-level-inner"></div></div></div>
<div class="div-inline-block"><p><b>Outer Level:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Battery Voltage:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Rainfall:</b><br />???</p></div>
<div class="div-inline-block" style="text-align:left;width:100%;"><p><b>Notifications:</b><br />???<br />???</p></div>
</a>
</body>
CSS:
a{
text-decoration:none;
}
div{
border:1px solid red;
}
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
}
.tank-level-outer {
border:1px solid black;
width:25px;
height:32px;
display:table-cell;
vertical-align:bottom;
margin:0 auto;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
}
add this
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
margin:0 auto;
}
.tank-level-outer {
border: 1px solid black;
width: 25px;
height: 32px;
margin: 0 auto;
padding: 0;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
margin-top:7px;
display: table;
vertical-align: bottom;
}
Updated Fiddle
http://jsfiddle.net/czgoxafr/22/
Add this:
.tank-level-outer {
display: table;
margin: 0 auto;
}
change the css of div .tank-level-outer and add margin zero auto , remove display table-cell
.tank-level-outer {
border: 1px solid #000;
width: 25px;
height: 32px;
margin: 0px auto;
vertical-align: bottom;}
This works:
.tank-level-outer {
width:25px;
height:32px;
display:block; // not necessary since this class is applied to a div
vertical-align:bottom;
margin:0 auto;
}
try this:
//css
.firstDiv{
padding:25% 25% 25% 25%
height:400px;
width:400px;
background-color:red;
}
.secondDiv{
height:200px;
width:200px;
background-color:pink;
}
//html
<div class="firstDiv">
<div class="secondDiv">
</div>
</div>
I have this CSS Code:
html,body {
font-family:Arial;
font-weight:bold;
}
.container {
text-align:center;
}
.box {
width:475px;
display: inline-block;
margin:10px 20px 0 auto;
padding:12px;
border:1px solid black;
min-height:60px;
text-align: center;
float: left;
height: 200px;
}
.box h2 {
font-size:44px;
margin-top:4px;
margin-bottom:0;
}
.box p {
font-size:60px;
border:1px solid black;
margin-bottom:0;
}
but the divs with the two lines of text in make the values/numbers display lower than all the other divs with only one line of text.
how can i make all the values/numbers display in the same place inside the the .box divs?
Here is a fiddle with the full code: http://jsfiddle.net/8kex9/
With your code, you could do something like this: JS Fiddle
Giving them both absolute positions, will cause them to be positioned based on parent, rather than the sibling. You just can't add too many lines of text, or else it will run into each other.
.box h2 {
font-size:44px;
margin-top:4px;
margin-bottom:0;
position: absolute;
width: 465px;
}
.box p {
position: absolute;
font-size:60px;
border:1px solid black;
margin-top: 120px;
width: 465px;
}
I want img_manip_header_close block to be centered, but it's not.
CSS:
#img_manip_header_close {
display:inline-block;
cursor:pointer;
width:50px;
top:5px;
text-align:center;
margin-left:5px;
margin-right:5px;
left:125px;
}
#img_manip_header {
height:30px;
width:300px;
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
line-height: 20px;
vertical-align: middle;
}
HTML
<div id="img_manip_header">
<div id="img_manip_header_close" onclick="window.location='index.php';">Close</div>
</div>
you are missing text-align:center; in #img_manip_header
#img_manip_header {
height:30px;
width:300px;
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
line-height: 20px;
vertical-align: middle;
text-align:center;
}
http://jsfiddle.net/KS4Z3/
Just change the css for img_manip_header_close to this:
#img_manip_header_close {
cursor:pointer;
width:50px;
text-align:center;
margin: 0 auto;
}
Fiddle: http://jsfiddle.net/82Asv/
Specifically, you need to remove margins and display:inline-block, and add margin auto.
In fact, you don't even need text-align:center here.
Updated fiddle: http://jsfiddle.net/82Asv/1/
Lose the width on the #img_manip_header_close and change display:inline-block to display:block
Did for trick here
Try this:
http://jsfiddle.net/TFHv4/
<div id="img_manip_header">
<div id="img_manip_header_close" onclick="window.location='index.php';">Close</div>
</div>
#img_manip_header_close
{
cursor:pointer;
}
#img_manip_header
{
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
text-align:center;
}
#img_manip_header_close
{
//lose this -> display:inline-block;
cursor:pointer;
width:50px;
top:5px;
//lose this -> text-align:center; (from what you said you want to align center 'img_manip_header_close' div not the text from inside div)
margin-left:5px;
margin-right:5px;
left:125px;
}
#img_manip_header
{
text-align:center; //add this line, in this way you will align center the content from 'img_manip_header' which is 'img_manip_header_close' div
height:30px;
width:300px;
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
line-height: 20px;
vertical-align: middle;
}
That was the right CSS. Thanks for ideas:
#img_manip_header
{
height:30px;
width:300px;
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
line-height: 20px;
vertical-align: middle;
text-align:center;
}
#img_manip_header_back
{
position:relative;
display:inline-block;
float:left;
cursor:pointer;
width:50px;
text-align:center;
margin-left:5px;
margin-right:5px;
}
#img_manip_header_close
{
position:relative;
display:inline-block;
cursor:pointer;
width:50px;
text-align:center;
margin-left:5px;
margin-right:5px;
margin: 0 auto;
}
#img_manip_header_next
{
position:relative;
display:inline-block;
float:right;
cursor:pointer;
width:50px;
text-align:center;
margin-left:5px;
margin-right:5px;
}