Why is my text not being centered when i am using the margin to center it(IT WORKS WHEN I USE - text-align : center) :
here is the code and the screenshot :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Angad's website</title>
<link rel="stylesheet" href="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<h1>I'm Angad</h1>
<p>a student </p>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/mountain.png" alt="mountain-image">
</body>
</html>
CSS TO THIS :
h1{
background-color: #ffe3fe;
margin: 0 auto;
}
RESULT :
You need to set a width as well. In the browser's mind, this is already centered. Here is an example:
h1{
background-color: #ffe3fe;
margin: auto;
width: 8em;
}
Related
his is the CSS code that I already have in place for fixed-sized buttons. I want to increase the size of the icon inside of these buttons. The style of the button is |text + icon|. Thank you
.nectar-button.fixed-size {
width: 250px;
height: 75px;
font-size: 18px;
line-height: 30px;
}
give another class name on icon tag and give css like:
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css" media="screen">
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
</style>
</head>
<body>
<button class="btn"><i class="fa fa-home"></i> Home</button>
</body>
</html>
try these code, I think your problem will be solved, Thank you.
I'm working on my first CSS design and I'm having an issue where the background for the header extends past the right of the header.
MWE:
header{
background-color: #FF0000;
padding: 20px;
}
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="ArtStoreInitial.css"/>
<link href="https://fonts.googleapis.com/css?family=Six+Caps"
rel="stylesheet">
<meta charset="utf-8">
<title>Hypothetical Art Store</title>
</head>
<body>
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
If I use display: inline;, it breaks the header completely.
Is there a way to wrap it, give it a margin and give it padding all at the same time? Do I have to hard-code the size? That doesn't seem right.
edit:
box-sizing set to border-box or content-box does nothing
Set the display property to inline-block
header {
background-color: #FF0000;
padding: 20px;
display: inline-block;
}
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
Trying to learn Flexbox, So if I wanted something vertically and horizontally center aligned but I also wanted something else within the parent element to be aligned to the top left corner of the page, would I use two containers or is there a way to vertically and horizontally align child elements? I'm so confused.
I appreciate any replies.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Elements Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/hover.css" type="text/css">
</head>
<body>
<div class='container'>
<div class='content'>
<img alt="" width="400" src="image/box1.svg" class="button hvr-grow">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</body>
</html>
CSS
body{
background-color: azure;
background-size: cover;
height:100vh;
}
.container{
display: flex;
flex-direction: column;
min-height:100vh;
justify-content: center;
align-items: center;
}
.content{
}
.boxorange{
}
I have an IMG tag with an background-image property. Whilst both images display in FF, only the IMG src image displays in IE. At this stage I am not concerned with positioning or anything, I just want both IMG src and background-image displayed on the page.
Here is my basic test HTML:
<html>
<head>
<title>carmen's test page </title>
<style>
.icon {
display: block;
background-image: url('drop-yes.gif');
background-repeat: no-repeat;
padding: 200px 200px 200px 200px;
margin: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div> <img class="icon" src="drop-no.gif"/> </div>
</body>
</html>
Any help greatly appreciated. Thank you
I wouldn't suggest giving the <img> css class background and a src; rather place it in a <div> instead and manipulate that as you need. You should get a result like this: jsFiddle
I think maybe your Doctype is a problem
Working Example
in this test it works fine in IE with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
.icon {
display: block;
background: url(http://dummyimage.com/450x450/dad/fff&text=yes) no-repeat;
padding: 200px 200px 200px 200px;
margin: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div> <img class="icon" src="http://dummyimage.com/50x50/444/fff&text=no"/> </div>
</body>
</html>
I do have div with a fixed height, containing an Image higher than the div's height.
I want to position this image in the middle of the div, and I use jquery-ui position().
However the image is clipped, the contents outside the div is not shown. I tried the overflow-y: visible (overflow-x must be hidden). I want the image to be completely visible I think I'm missing something trivial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Jeroen's Plaatjes Presentator</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#focus_img').position({my: 'center center', at: 'center center', of: '#panel_1'});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="scroll">
<div class="panel" id="panel_1">
<img src="images/middle/kameleon.png" alt="kameleon" id="focus_img" style="{width:239 height:160}"/>
</div>
</div>
</div>
</div>
<div id="content" style="margin-top:50px;margin-left:auto;">
<table width="100%">
<tr><td id="left" width="50%"><div class="stage"></div>
</td><td id="bright" width="50%"></td></tr>
</table>
</div>
</body>
</html>
the css looks like:
#wrapper {
padding-top: 150px;
}
#slider {
position: relative;
}
.scroll {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
margin: 0 auto;
position: relative;
border: 2px solid black;
height: 50px;
}
Overflow is tricky business. One option is to increase the div height to fit your image, then either display: block; or float it.
Have you tried setting the overflow for panel_1?