Best Way to Center a ≪Div≫ on a Page Vertically and Horizontally

How align center text in custom buttons?

To vertically-centre the text of these elements, simply set the line-height of the element's text equal to the height of the element, and set box-sizing to border-box (in order that the height of all elements are the same:

.btn {
    /* other, unchanged, CSS */
    line-height: 80px; /* <- changed this */
    box-sizing: border-box; /* <- added this */
}

JS Fiddle demo.

Obviously this does cause issues, should the text wrap to a second line.

Sweetalert - Get div content and show it there as text

$("#itemcart") is a object you want its inner content so you may use

var itemcurt = $("#itemcart").text();

.text() will give the inner content in text form even if there are some tags in it then also everything will come in text

For example

<div id="itemcart">
   <div>text</div>
</div>

In above html if you use .text() then the div inside it will come in text form like this <div>text</div>

If in case you have html tags inside it and want in html form then use this

var itemcurt = $("#itemcart").html();

How to change header and footer to full width

You can simply add a css style for your header and footer like this:

header {
  width:100%;
  height:20%; //your desired height
  position:absolute;
  top:0;
  left:0;
  background-color:blue;
}

footer{
  width:100%;
  height:20%; //your desired height
  position:absolute;
  bottom:0;
  left:0;
  background-color:blue;
}

SEE THIS DEMO

Another way to do this is to separate the header, the footer, and the body into three different divs:

<html>
  <head></head>
  <body>
    <div id="body">
      <div id="header">your header content</div>
      <div id="bodycontainer">your body content</div>
      <div id="footer">your footer content</div>
    </div>
  </body>
</html>

To display the header and the footer using the full width of the page, use this CSS:

#body
{
  width:100%;
  height:100%;  // the desired height
  position:absolute;
  top:0;
  left:0;
}

#header
{
  width:100%;
  height:20%;   // the desired height
  position:absolute;
  top:0;
  left:0;
  background-color:blue;
}

#footer
{
  width:100%;
  height:20%;   // the desired height
  position:absolute;
  bottom:0;
  left:0;
  background-color:blue;
}

The header will be at the top of your page and the footer at its bottom. Both use the entire screen width.

Check this fiddle:

Simple Demo

How can I retrieve clean text inside HTML tags using PHP?

Use strip_tags().

Strange effect of CSS overflow hidden vs. visible on position of parent element

From CSS 2.2 spec

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

So adding overflow:hidden is stopping the margins from collapsing.

CSS background image to fit width, height should auto-scale in proportion

There is a CSS3 property for this, namely background-size (compatibility check). While one can set length values, it's usually used with the special values contain and cover. In your specific case, you should use cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Eggsplanation for `contain` and `cover`

Sorry for the bad pun, but I'm going to use the picture of the day by Biswarup Ganguly for demonstration. Lets say that this is your screen, and the gray area is outside of your visible screen. For demonstration, I'm going to assume a 16x9 ratio.

screen

We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on contain and cover. Note that I also assume that we didn't mangle the width and/or height of body.

`contain`

contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

This makes sure that the background image is always completely contained in the background positioning area, however, there could be some empty space filled with your background-color in this case:

contain

`cover`

cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off:

cover

Demonstration with actual code

div > div {  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);  background-repeat: no-repeat;  background-position: center center;  background-color: #ccc;  border: 1px solid;  width: 20em;  height: 10em;}div.contain {  background-size: contain;}div.cover {  background-size: cover;}/******************************************** Additional styles for the explanation boxes *********************************************/
div > div {  margin: 0 1ex 1ex 0;  float: left;}div + div {  clear: both;  border-top: 1px dashed silver;  padding-top:1ex;}div > div::after {  background-color: #000;  color: #fefefe;  margin: 1ex;  padding: 1ex;  opacity: 0.8;  display: block;  width: 10ex;  font-size: 0.7em;  content: attr(class);}

<div>  <div class="contain"></div>  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.  </p></div><div>  <div class="cover"></div>  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p></div>

How to make html ignore code that is part of text?

Short Answer.

Encode your code using an online HTML Encoder and then put it inside pre

<pre>
    <%--your encoded code goes here--%>
</pre>

Long Answer.

The above will only help you to show your code. If you want proper highlighting for your code, Try something like SyntaxHighlighter

Link: How to use SyntaxHighlighter.

Why does code render in code block?

I do not think [those tags] mean what you think they mean.

<pre> allows you to preserve white space and line feeds. <code> allows you to semantically indicate that code is being displayed on your page. Both have some default styles (such as applying a fixed-width font), but neither one does anything to escape <, >, &, or ", so any unescaped HTML code you put in between those tags is going to be processed as HTML. You'll have to use <, >, &, and ". Here's a page where you can paste in text and have it escaped: http://accessify.com/tools-and-wizards/developer-tools/quick-escape/

Best Way to Center a ≪Div≫ on a Page Vertically and Horizontally

How align center text in custom buttons?

Sweetalert - Get div content and show it there as text

How to change header and footer to full width

How can I retrieve clean text inside HTML tags using PHP?

Strange effect of CSS overflow hidden vs. visible on position of parent element

CSS background image to fit width, height should auto-scale in proportion

Eggsplanation for `contain` and `cover`

`contain`

`cover`

Demonstration with actual code

How to make html ignore code that is part of text?

Why does code render in code block?

Related Topics

Leave a reply

How align center text in custom buttons?

Sweetalert - Get div content and show it there as text

How to change header and footer to full width

How can I retrieve clean text inside HTML tags using PHP?

Strange effect of CSS overflow hidden vs. visible on position of parent element

CSS background image to fit width, height should auto-scale in proportion

Eggsplanation for contain and cover

contain

cover

Demonstration with actual code

How to make html ignore code that is part of text?

Why does code render in code block?

Related Topics

Leave a reply

Eggsplanation for `contain` and `cover`

`contain`

`cover`