Search the Community
Showing results for tags 'centering'.
Found 12 results
-
.w3-table-center{margin-left:auto;margin-right:auto} .w3-table-70{width:70%} Hello. I'm trying to follow W3 standards (with a few additions above to the standard CSS) So far, I have this :- <div class="container w3-center"> <div class="container w3-panel w3-margin w3-center w3-table-half w3-table-center w3-yellow"> TEXT </div> </div> basically i want the 'panel' to be 60% or 70% the width of the screen - i CAN do this However it is still flushed to the left side of the screen - but taking 60/70% of my screen - depening on how i adjust the code.. I even tried o add an outer div with center command - but thats still flushed ' to the left.. i CAN do this with a TABLE. does anyone know how i do it with a div / panel / container ? make it centered, & not take over the whole width of the screen.
-
Hey, I know this is probably a fairly simple issue but I've never coded a website before so go easy on me! I have this page that I can't seem to get looking right on mobile AND desktop. It's either one or the other. I was hoping someone might have some insight as to how I can make the image on the left and the contact info on the right stack properly without just breaking up the text and/or making the image insanely small on a phone. Here's a screenshot of the page: https://imgur.com/a/DLC2sjR The other problem is that I want it all centred on the page. I mean, I can do "w3-third" for the smaller pictures at the bottom but when I use "w3-half" for the top it just aligns everything left. I want both elements to behave as though they are one on a desktop without an ugly spacing between them and stack on top of eachother on mobile. <!DOCTYPE html> <html> <title>BJH Law</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> * { box-sizing: border-box; } body { margin: 0; } .center { margin: 100px; width: 75%; border: 10px solid #009688; padding: 100px; } .column { float: left; width: 33.33%; padding: 100px; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width:600px) { .column { width: 100%; } } img { /* filter: url(filters.svg#grayscale); Firefox 3.5+ */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ -webkit-transition: all .8s ease-in-out; } img:hover { filter: none; -webkit-filter: grayscale(0); -webkit-transform: scale(1.01); } </style> <body id="myPage"> <!-- Navbar --> <div class="w3-top"> <div class="w3-bar w3-theme-d2 w3-left-align"> <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-hover-white w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a> <a href="index.html" class="w3-bar-item w3-button w3-teal"><i class="fa fa-home w3-margin-right"></i>Home</a> <a href="index.html#team" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Team</a> <a href="index.html#contact" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Contact</a> <div class="w3-dropdown-hover w3-hide-small"> <button class="w3-button" title="Notifications">Lawyers <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-card-4 w3-bar-block"> <a href="Gary.html" class="w3-bar-item w3-button">Gary L. Bainbridge</a> <a href="James.html" class="w3-bar-item w3-button">James D. Jodouin</a> <a href="Dawn.html" class="w3-bar-item w3-button">Dawn Cheecham</a> <a href="Keir.html" class="w3-bar-item w3-button">Keir Vallance</a> </div> </div> </div> <!-- Navbar on small screens --> <div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium"> <a href="index.html#team" class="w3-bar-item w3-button">Team</a> <a href="index.html#contact" class="w3-bar-item w3-button">Contact</a> </div> </div> <!-- Dawn Bio --> <div class=".center"> <div class="row"> <div class="column"> <img src="images/Lawyer02.jpg" alt="Boss" style="width:100%" class="w3-circle"> </div> <div class="column"> <h1>Dawn Cheecham</h1> <p style="font-size: 50;"> Dawn is a Dene lawyer from the Clearwater River Dene Nation. She works closely with various First Nations governments and organizations on a wide range of issues including the duty to consult, specific claims, governance initiatives and general advice.</p> <p><i class="fa fa-map-marker w3-text-teal w3-xlarge"></i> Saskatoon, SK</p> <p><i class="fa fa-envelope w3-text-teal w3-large"></i> <a href="mailto:dcheecham@bjhlaw.ca?" target="_top">dcheecham@bjhlaw.ca</a></p> <p><i class="fa fa-phone w3-text-teal w3-xlarge"></i> <a href="tel:306-664-2468">[306] 664-2468</a></p> <p><i <i class="fa fa-fax w3-text-teal w3-large"></i> [306] 664-2469</p> </div> <!-- Team Container --> <div class="w3-container w3-padding-64 w3-center" id="team"> <div class="w3-row"><br> <div class="w3-quarter"> <a href="Gary.html"> <img src="images/Lawyer01.jpg" alt="Boss" style="width:45%" class="w3-circle"> </a> <h3>GARY L. BAINBRIDGE, QC.</h3> </div> <div class="w3-quarter"> <a href="James.html"> <img src="images/Lawyer03.jpg" alt="Boss" style="width:45%" class="w3-circle"> </a> <h3>JAMES D. JODOUIN</h3> </div> <div class="w3-quarter"> <a href="Keir.html"> <img src="images/Lawyer04.jpg" alt="Boss" style="width:45%" class="w3-circle"> </a> <h3>KEIR VALLANCE</h3> </div> </div> </div> <!-- Footer --> <footer class="w3-container w3-padding-10 w3-theme-d1 w3-center"> <p>Copyright <a href="http://www.bjhlaw.ca/" target="_blank">BJH LAW 2019</a></p> <div style="position:relative;bottom:100px;z-index:1;" class="w3-tooltip w3-right"> <span class="w3-text w3-padding w3-teal w3-hide-small">Go To Top</span> <a class="w3-button w3-theme" href="#myPage"><span class="w3-xlarge"> <i class="fa fa-chevron-circle-up"></i></span></a> </div> </footer> <script> // Script for side navigation function w3_open() { var x = document.getElementById("mySidebar"); x.style.width = "300px"; x.style.paddingTop = "10%"; x.style.display = "block"; } // Close side navigation function w3_close() { document.getElementById("mySidebar").style.display = "none"; } // Used to toggle the menu on smaller screens when clicking on the menu button function openNav() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Yeah the codes a mess please don't make fun lol.
-
I used the guide from this link https://www.w3schools.com/howto/howto_js_tabs.asp I would like to center the buttons. I currently have 22 buttons. The second line is arranged to the left. I want them to be in the middle. I tried several ways but unfortunately to no avail. Thank you in advance for your help.
-
How do you center/position a <script></script> within HTML5?
h2ochip.com posted a topic in Critiques
I have spent many hours (over many days) trying to find out how to align a <script></script> within HTML5 specifically one that creates a canvas using . There is a page referring to centering images... https://www.w3schools.com/howto/howto_css_image_center.asp useless! There is a page referring to CSS Layout.... https://www.w3schools.com/css/css_align.asp useless! And heres another one on Canvas reference.... https://www.w3schools.com/tags/ref_canvas.asp useless! https://www.w3schools.com/tags/tag_canvas.asp useless! https://www.w3schools.com/tags/tag_script.asp useless! https://www.w3schools.com/html/html5_canvas.asp also useless! This is so basic a feature you would think that there would be examples of this in some of your examples. but no! Here is the code I have been trying to center.....as you can see I have tried quite a few different methods. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; margin: auto; text-align: center; object-position:center } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style> </head> <body onload="startGame()"> <div class="center"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "red", 10, 120); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 600; this.canvas.x = 100; this.canvas.y = 50; this.canvas.style.cursor = "none"; //hide the original cursor this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('mousemove', function (e) { myGameArea.x = e.pageX; myGameArea.y = e.pageY; }) }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y) { this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } } function updateGameArea() { myGameArea.clear(); if (myGameArea.x && myGameArea.y) { myGamePiece.x = myGameArea.x; myGamePiece.y = myGameArea.y; } myGamePiece.update(); } </script> </div> <p>Move the cursor inside the canvas to move the red square.</p> </body> </html> Please can you place more references to alignment as this issue has become somewhat annoying considering how easy this is in p5 javascript for instance. In p5 its - var canvas = createCanvas(1000, 350); canvas.position(x,y); So please make some kind of reference to centering js and <script> in some of the other pages using the term center, like <center> (yes I know its deprecated - but what are the alternatives?) as the search for this info is rather long. Thankyou in advance. -
Don't matter the browser size, I need that the picture ocup 100% the browser height. For this, I just set the img heith in 100vh, and the code works fine. But, I also need this image be horizontal centered in the browser. For this, I've set the text align of my DIV that contain my IMG in center. When the browser width is greater than the img width, it works fine. But, if the browser width is less than the img width, the img go left aligned. I really need that img be centered in the browser size all the time, don't matter the conditions. I just know that I can do it replacing the img for background-image and set the background-position in center. But, if I did it, Google will not index my images and it results in a big trouble for me. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link type="text/css" rel="stylesheet" href="code/css/test.css"> </head> <body> <div> <img src="image.jpg"> </div> </body> </html> * { margin: 0; padding: 0 } div { background-color: red; text-align: center; } img { height: 100vh; } (The picture I'm working is 1680px x 945px) At the image below I'm showing the correct horizontal align for this picture. Centered: https://uploaddeimagens.com.br/imagens/certo-jpg-feef13d2-44d2-407b-8b1b-f334107cb371 And... At this another image, I'm showing the error it ocurrs. The picture is left aligned and crop only the right side of the picture: https://uploaddeimagens.com.br/imagens/errado-jpg-746c72b8-36d2-4942-9895-0cfb43abd77d What I need is... When the browser width is less than the img width, the picture still be centered in the browser, resulting that the image would be cropped both sides, ledt and right sides, and it will result in this specifically image, the church in background will be centered in the browser all the time. It was a simple example that what I need. Is there any way for center this image like I need using only CSS? I will be very grateful to anyone who can help me with this problem. Thanks. Greetings from Brazil.
-
Good evening. I'm creating a 3-column layout, in which the left and right columns should have their widths set to 300px, and the middle column should fit in the rest left over. Regarding the layout everything is OK, exactly as I need it. However, within the central DIV, I put an IMG, which I want to always occupy 100% of the height of this DIV and that it is centered horizontally, independently of the width of the DIV in which this IMG is contained is larger or smaller width than the width of the IMG itself. Relative to occupying 100% of the height everything is OK, no matter how I resize the browser window it is self-adjusting as desired. However, it is not getting horizontally centered, as is the goal. It is always left-aligned, except when the width of the DIV is greater than the width of the IMG, so the IMG is thus perfectly centered inside the container DIV. However, when the width of the DIV is smaller than the width of the IMG, the IMG is left-aligned, cutting portions of the image only on its right side, not getting centered as expected. I'm testing on a desktop with 1920x1080 resolution and the image I'm using at IMG is 1680x945px. Here are the HTML and CSS codes: !doctype html> <html lang="pt-br"> <head> <link type="text/css" rel="stylesheet" href="code/css/estudo.css"> </head> <body> <div id="main"> <div id="viewport_left" class="viewports"> </div> <div id="viewport_center" class="viewports"> <img id="imagem_teste" src="imagem_teste_01.jpg"> </div> <div id="viewport_right"> </div> </div> <div id="footer"> </div> </body> </html> * { margin: 0; padding: 0; text-align: center; overflow: hidden; } #main { width: 100%; margin: 0; } #viewport_left { min-height: calc(100vh - 25px); margin-bottom: 25px; width: 324px; background-color: #333333; position: fixed; left: 0; top: 0; } #viewport_center { min-height: calc(100vh - 25px); width: calc(100vw - 650px); margin-bottom: 25px; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; background-color: red; position: absolute; left: 50%; top: 50%; margin-left: calc(((100vw - 648px) / 2)* -1); margin-top: calc((100vh / 2)* -1); display: table; overflow: hidden; } #imagem_teste { max-height: calc(100vh - 25px); position: absolute; width: auto; height: auto; } #viewport_right { min-height: calc(100vh - 25px); margin-bottom: 25px; width: 324px; background-color: #333333; position: fixed; right: 0; top: 0; } #footer { position: fixed; bottom: 0; left: 0; height: 24px; width: 100%; background-color: #333333; border-top: 1px solid #FFFFFF; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #FFFFFF; } Does anyone know how can I fix this problem? Thank you in advance for any help and cooperation. Thank you, Evair Peterson.
-
I'm new to forum, a neophyte when it comes to HTML and CSS, brought up via Frontpage with all its "foibles". Trying desperately to fix my website and make it all HTML5 and CSS3 valid. I'm going crazy trying to insert images in text (floating right or left) with a caption underneath. In the old days of tables I could do this in 5 seconds. So far everything I've tried just doesn't work. To begin clean I created the most simple of test programs with one photo, one caption, no overhead crap, no style sheets. Here is the code: <figure> <img alt="" src="literature/worktales/images/brunswickMineShotcrete.jpg" style="float:right"/> <figcaption>Shotcrete</figcaption> </figure> The results are here: www.raiderracing.com/test.htm. I did lots of research on this site and others and tried different scenarios and none worked. I'm using Expressions Web 4 for editing, and latest MS Edge or Google Chrome for browsers. I tried this on the W3C "Tryit" page and floating the figure left or right leaves the caption where it is. Using just <img alt="" src="literature/worktales/images/brunswickMineShotcrete.jpg" style="float:right"/>shotcrete achieves the same thing with 4 fewer commands. So, bottom line: how do I float photos left and right in text, and put a caption underneath?
-
Hi everyone! I am trying to vertically center divs inside another div, using: position: relative;vertical-align: middle; But it's not working! Does anyone know why? On this page: http://www.jasonwangart.com/p/about-web.html , I am trying to make the dividers - the vertical black lines - be vertically centered within the parent div. You can see my code here: <!doctype html> <style> .jw-1-about-centre-align { width: 300%; border: 0px solid red; font-size: 16px; background-color: rgba(255,255,255,0.0); text-align: center; } .jw-2-about-pad { vertical-align: top; display: inline-block; min-width: 60px; padding: 0px 0px 0px 0px; border: solid rgba(0,0,0,0.2); border-width: 0px 1px 0px 1px; border-radius: 15px 15px 15px 15px / 30px 30px 30px 30px; margin: 0px auto 0px auto; text-align: left; font-size: 16px; background-color: rgba(255,255,255,0.3); } .jw-3-about-column { vertical-align: top; display: inline-block; border: 0px solid orange; width: 300px; height: 100%; margin: 10px 15px 10px 15px; } .jw-3-about-divider { display: inline-block; border: 0px solid green; width: 1px; height: 300px; margin: 0px 0px 0px 0px; background-color: rgba(0,0,0,0.5); position: relative; vertical-align: middle; } .jw-4-about-text-header { width: 100%; border: 0px solid green; margin: 20px auto 20px auto; font-size: 1.2em; font-weight: bold; font-style: italic; } .jw-4-about-text-body { width: 100%; border: 0px solid yellow; margin: 20px auto 20px auto; }</style> <div class="jw-1-about-centre-align"> <div class="jw-2-about-pad"> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> About me: </div> <!-- JUST SOME CODE FOR THE TEXT - OMITTED FOR SIMPLICITY --> </div> <div class="jw-3-about-divider"> </div> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> <b>Contact me:</b> </div> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> <div class="jw-3-about-divider"> </div> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> <b>Email updates:</b> </div> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> </div> </div> </!doctype> -
Hi All, Much has been learnt and heaps of progress has been made since my last post, Coming across something weird now however. If you inspect my test site here http://mrt.guardian1.com.au:57005/test2/index_template.php you will see that in the footer I cannot seem to get the 3 divs to allign. Can someone please point me in the right direction on what css to apply. Specifically this is the HTML for the footer <div data-role="footer" class="footer" data-id="footer" data-position="fixed"> <div> <div> <button onclick="history.go(0)" class="medbtn ui-btn ui-corner-all ui-icon-refresh ui-btn-icon-left" data-role="button" data-icon="refresh" >Refresh</button> <button id="gps_address" class="medbtn ui-btn ui-corner-all ui-icon-navigation ui-btn-icon-left" data-role="button" data-icon="refresh" >Current Location ?</button> </div> <div class="center"> <label>YCH-882</label> </div> <div class="time right"> <span id="time" /><script src="custom/time.js"></script> </div> </div></div> and this is the css .footer{ display: block; }.time{ margin-right:15px; margin-top:8px; }.right{ text-align: right;}.center{ text-align: center;}
-
Hi guys I have a navigation bar where the code for the position isposition:absolute; left:350px; top:400px;On my computer it looks fine and where I wanted it to be. But on my friends computer it's skewed all the way to the right. So what am I doing wrong? I'm fairly new to CSS and only learned through some online reading so sorry for the beginners question :/ @font-face { font-family: 'Limelight'; src:url(../fonts/Limelight.eot); src:local(Limelight), url('../fonts/Limelight.ttf') format('opentype');} body { background:url(../images/bg.png); margin: 0; padding:0;}#logo { background:url(../images/header.png) no-repeat; background-position:50% 0%; width:100%; display:table; }#content { width: 900px; margin: 450px auto 0; background: white; border: solid 1px #CCC; padding: 20px 20px 0px 20px;}#header { position:absolute; left:350px; top:400px; list-style:none;}#header li { display:inline; padding:0px 32px 0px 0px;}#header ul li a { font-family:'Limelight'; color:#FFF; font-size:30px; text-decoration:none;}#header li a:visited { display:inline; font-family:'Limelight'; color:#FFF; font-size:30px;} -
I know the tag is deprecated but is there an easy way to center items. for example take this code and "de-deprecate" <!DOCTYPE html><html><body> <center><p>Hello</p></center></body></html>
-
My site is not centreing, despite using, #site { width: 950px; background:#848484; margin:0 auto; }; see: www.templatetest.co.uk Can anyone see what the problem might be. I have never had this problem before and wonder if it is a conflict with something else in the css file.Jean chilli.css
