I used text-align:center to center the three divisions, but they are all aligned on the left.
I was told that because these three elements are all block, so they wouldn't center.However, I tried to add display:inline-block, but when I inspected the page, it still showed me display:block.
Here's my code:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.Google-logo {
width: 250px;
}
.Google-search-box {
font-size: 13px;
padding-left: 15px;
height: 30px;
width: 460px;
border-radius: 15px;
border-style: solid;
border-color: rgb(160, 157, 157);
box-shadow: 0 1px 6px rgb(183, 181, 181);
margin-top: 15px;
}
.div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img
class="Google-logo"
src="images/Google_2015_logo.svg.png"
alt="Google logo"
/>
</div>
<div>
<input
class="Google-search-box"
type="text"
placeholder="Search Google or type a URL"
/>
</div>
<div>
<button class="left-button">Google Search</button>
<button class="right-button">I'm Feeling Lucky</button>
</div>
</body>
</html>
Very simple,
div is not a class, is a html element, so do this;
CSS
div {
text-align: center;
}
You can do it in multiple ways, the simplest and the first way is to write a CSS like:
div {
text-align: center
}
The second way if you want to use a inline CSS in your HTML code itself:
<div style="text-align:center">
The third way is what you were trying to do by using classes/id for that you need to change both your HTML and CSS code:
*for class
HTML:
<div class="center"> </div>
CSS:
.center {
text-align: center,
}
*for id
HTML:
<div id="center"> </div>
CSS:
#center {
text-align: center,
}
And most importantly div is not a class it's an HTML tag so your code didn't work because you used
.div {
text-align: center,
}
in your CSS code and the . symbolizes a class whereas if you had written it like this it would have worked as it would have given the text center to all the divs present in your code
div {
text-align: center,
}
But I feel you should use classes and center the text in div so that it could be specific to the div you wanna center texts for so try to prioritize the second or third way over the first one.
Related
I've been trying to get these two divs to display next to each other. I've looked up the many ways to do it. I've display: inline-block, flex-box, CSS grid. None of them seem to be working. I did some research with flex box, but with that, I found a lot of the articles I only listed the parent div and then the child div, with the child div just being used twice to create two div next to each other with the exact same properties. I am trying to display two divs right next to each other, but those two div have divs inside of them as well in order to style individual lines in a blog.
Here is my blog.css stylesheet. I am using the .blog-wrap as the div that is supposed to be on the left. The divs after blog wrap are to style the individual lines in the left div.
#charset "utf-8";
/* CSS Document */
.blog-wrap {
padding: 20px;
text-align: left;
width: 500px;
display:inline-block;
}
#blog-title {
font-size: 18px;
font-weight: 700;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
}
#blog-posted-by-date {
font-size: 12px;
}
#blog-content {
font-size: 14px;
Next, we have the actual page displaying the content. I have the stylesheet typed right into the page since this is the landing page, and I plan on using these styles solely on this page. The .landing_page_main is the parent div and the two divs that are supposed to be next to each other go inside. .landing-main-login-register is the div element that is supposed to be on the right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<META name="keywords" content="">
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/nav.css" />
<link rel="stylesheet" href="css/blog.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="stylesheet" href="css/forms.css" />
<title></title>
</head>
<body>
<style>
.landing_ad_field {
text-align: center;
background-color: #CCC;
max-width: 900px;
height: auto;
margin: auto;
border-radius: 5px;
font-size: 18px;
}
.landing_page_main {
background-color: #CCC;
opacity: 0.5;
width: 900px;
max-width: 900px;
max-height: 500px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 5px;
padding: 5px;
box-sizing:border-box;
display: table;
}
.landing-main-login-register {
padding: 5px;
text-align: center;
font-size: 50px;
border: 5px solid #999;
width: 400px;
}
</style>
<center><img src="../images/Official Logo.png" width="300" /></center>
<section class="public_nav_bar">
<div id="public_nav_bar">
Directory ·
Education ·
·
Events ·
Contact Us
</div>
</section>
<section class="landing_ad_field">
Advertisement Placement
</section>
<section class="landing_page_main">
<div class="blog-wrap">
News Area
<?php
include 'db_connect.php';
$sql = "select * from blog";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_array($result)) {
echo '<div id="blog-title">' .$row['title'] .'</div>';
echo '<div id="blog-posted-by-date">Posted By ' .$row['posted_by'] .', ' .date("F j Y g:i:s" , strtotime($row['date'])) .'</div>';
echo '<div id="blog-content">' .$row['content'] .'</div>';
}
?>
</div>
<div class="landing-main-login-register">
✎
Register
<br/>
<hr/>
🔒
Log In
</div>
</section>
<?php require 'master-pages/footer.html' ?>
</body>
</html>
Currently, they are displaying stacked, with the login-register-register div below the blog-wrap.
Any advice would be greatly appreciated.
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/600x400/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I used these HTML codes to try to make a website, but I want the section of the feedback be under the image.
I want the result be
instead of
Can anyone tell me how to do it?
I currently used some <br>s and a character to simulate the result that I want
What youre looking for is a so called clearfix:
What is a clearfix?
Whats happening?
By using float:left youre actually changing the text float - beginning at the point where you set float.
To restore the regular blockish behaviour you need to clear the float again.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<div class="clearfix">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/300x200/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
</div>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I wrapped your whole upper part into a div with the clearfix class.
Inside that div you change the float behaviour by using float:left on the image.
By adding the clearfix to the div, there will be a after Element which sets clear:both which basically restores regular behaviour so everything after that doesnt float anymore.
Fore more information and some live examples see https://www.w3schools.com/css/css_float.asp, https://www.w3schools.com/css/css_float_clear.asp and https://www.w3schools.com/css/css_float_examples.asp.
I have the following HTML code with the body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dwight Schrute's Bidding Blunder</title>
<!-- the MAIN.CSS file is linked here -->
<link rel="stylesheet" href="guessing-game.css">
</head>
<body>
<body class='bg' background="dwight_schrute.jpg"></body>
<h1 align="center">Dwight Schrute's Bidding Blunder</h1>
<div class="youTubeLink">
The Office Episode: Bidding Blunder
</div>
<div>
<p id="p1">BEFORE I GUESS</p>
<p id="p2">ANYTHING</p>
<p id="p3">I ASK MYSELF</p>
<p id="p4">"WOULD AN IDIOT DO THAT?"</p>
<p id="p5">AND IF THE ANSWER IS YES</p>
<p id="p6">I DO NOT GUESS THAT</p>
<br>
<p id="p7">-Dwight Schrute</p>
</div>
</body>
</html>
I am trying to have the link align to the center of my page. The CSS is linked to my HTML file (works for other stuff).
I tried the following CSS:
.bg {
background-size:100% 100%;
}
.youTubeLink {
text-align: center;
}
.youTubeLink>a {
color: whitesmoke;
}
a:visited {
text-align: center;
/* color: #3C1900; */
color: whitesmoke;
}
But my link is still left aligned (the link is top left of page and underlined):
You are assigning your text-align property to a link element, which is an inline element, therefore its width is only the size of its contents. If you place your link inside a div element and assign the text-align property to that div, then because the div is a block level element, it takes up 100% of the page width, the link will align to the center of the page:
body {
background-color: lightblue;
}
.youTubeLink {
text-align: center;
}
.youTubeLink>a {
color: whitesmoke;
}
<div class="youTubeLink">
The Office Episode: Bidding Blunder
</div>
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
i need to allign element under RED arrow right under the element where BLACK arrow is pointed at. In other words how do i allign element close enough to input like 2-5px.
http://i.stack.imgur.com/Q4IeX.png
code is here
CSS
form.loginform
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div.divbg
{
width: 200px;
height: 167px;
position: fixed;
text-align: center;
vertical-align: middle;
margin-top: 30%;
margin-left: 40%;
background-color: aliceblue;
}
a.register
{
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 11px;
}
#pass
{
float: inherit;
margin: 0;
}
HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel=StyleSheet href="loginstyle.css" type="text/css" media="screen"/>
</head>
<body>
<div class="divbg">
<form method="post" class="loginform">
Логин <div class="center"><input type="text" name="login"/></div><br/>
<div id="pass">Пароль <div class="center"><input type="text" name="password"/></div><br/>
хочу зарегистрироваться!<br/></div>
<input type="submit" name="submit" value="Войти"/><br/>
</form>
</div>
</body>
</html>
1 Get a modern browser
2 Install firebug or use developers tools
3 check if the last input box (black arrow) has some margin-bottom or padding-bottom.
4 If yes, set it to 0 or a negative value
5 if No, check if the element with the red arrow has margin-top, and remove it or set a negative margin-top value.
Without code, It's not so easy to help you
You have a <br /> tag after the #center div. That is what is pushing it down. You also have some padding around the input tag; both of those issues are what is causing that space.
Your code:
<div class="center"><input type="text" name="password"/></div><br/>
Remove that <br />