Cách căn giữa một <div> theo chiều ngang

4480
Peter Mortensen 2008-09-23 02:27.

Làm cách nào tôi có thể căn giữa một chiều ngang <div>trong một cái khác <div>bằng CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

30 answers

4930
AhmerMH 2008-09-23 02:29.

Bạn có thể áp dụng CSS này vào bên trong <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Tất nhiên, bạn không cần phải thiết lập widthđể 50%. Bất kỳ chiều rộng nào nhỏ hơn chiều rộng được chứa <div>sẽ hoạt động. Các margin: 0 autolà những gì hiện các định tâm thực sự.

Nếu bạn đang nhắm mục tiêu Internet Explorer 8 (và mới hơn), tốt hơn là bạn nên có điều này thay thế:

#inner {
  display: table;
  margin: 0 auto;
}

Nó sẽ làm cho phần tử bên trong trung tâm theo chiều ngang và nó hoạt động mà không cần thiết lập cụ thể width.

Ví dụ làm việc ở đây:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


BIÊN TẬP

Với flexboxnó, rất dễ dàng để tạo kiểu div theo chiều ngang và chiều dọc ở giữa.

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Để căn giữa div theo chiều dọc, hãy sử dụng thuộc tính align-items: center.

1288
Alfred 2011-01-21 12:55.

Nếu bạn không muốn đặt chiều rộng cố định ở bên trong, divbạn có thể làm như sau:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Điều đó làm cho bên trong divthành một phần tử nội tuyến có thể được căn giữa text-align.

401
Konga Raju 2012-08-31 02:05.

Cách tiếp cận tốt nhất là với CSS 3 .

Mô hình hộp:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Theo khả năng sử dụng của bạn, bạn cũng có thể sử dụng các box-orient, box-flex, box-directionthuộc tính.

Linh hoạt :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Đọc thêm về căn giữa các phần tử con

  • Liên kết 2

  • Liên kết 3

  • Liên kết 4

điều này giải thích tại sao mô hình hộp là cách tiếp cận tốt nhất :

  • Tại sao mô hình hộp W3C được coi là tốt hơn?
265
nuno_cruz 2011-12-02 09:52.

Giả sử rằng div của bạn rộng 200 pixel:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Đảm bảo rằng phần tử mẹ được định vị , tức là tương đối, cố định, tuyệt đối hoặc cố định.

Nếu bạn không biết chiều rộng của div, bạn có thể sử dụng transform:translateX(-50%);thay thế cho lề âm.

https://jsfiddle.net/gjvfxxdj/

Với CSS calc () , mã có thể trở nên đơn giản hơn:


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Nguyên tắc vẫn vậy; đặt mục ở giữa và bù lại chiều rộng.

240
Tom Maton 2013-09-12 01:32.

Tôi đã tạo ví dụ này để hiển thị cách theo chiều dọcchiều ngang align .

Về cơ bản, mã này là:

#outer {
  position: relative;
}

và ...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

Và nó sẽ vẫn ở trong centerngay cả khi bạn thay đổi kích thước màn hình của mình.

226
Danield 2013-04-23 00:32.

Một số áp phích đã đề cập đến cách sử dụng CSS 3 để căn giữa display:box.

Cú pháp này đã lỗi thời và không nên được sử dụng nữa. [Xem thêm bài này] .

Vì vậy, đây là cách mới nhất để căn giữa trong CSS 3 bằng cách sử dụng Mô-đun bố cục hộp linh hoạt .

Vì vậy, nếu bạn có đánh dấu đơn giản như:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... và bạn muốn căn giữa các mục của mình trong hộp, đây là những gì bạn cần trên phần tử mẹ (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Nếu bạn cần hỗ trợ các trình duyệt cũ hơn sử dụng cú pháp cũ hơn cho flexbox thì đây là một nơi tốt để xem.

147
Salman von Abbas 2012-05-13 13:45.

Nếu bạn không muốn đặt chiều rộng cố định và không muốn thêm lề, hãy thêm display: inline-blockvào phần tử của bạn.

Bạn có thể dùng:

#element {
    display: table;
    margin: 0 auto;
}
112
iamnotsam 2014-05-18 08:38.

Căn giữa một div có chiều cao và chiều rộng không xác định

Theo chiều ngang và chiều dọc. Nó hoạt động với các trình duyệt hiện đại hợp lý (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, v.v.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker với nó hơn nữa trên Codepen hoặc trên JSBin .

98
Sneakyness 2009-07-25 12:00.

Đặt widthvà đặt margin-leftmargin-rightthành auto. Đó là của chỉ ngang , mặc dù. Nếu bạn muốn cả hai cách, bạn chỉ cần làm theo cả hai cách. Đừng ngại thử nghiệm; nó không giống như bạn sẽ phá vỡ bất cứ điều gì.

97
gizmo 2008-09-23 02:30.

Nó không thể được căn giữa nếu bạn không cho nó chiều rộng. Nếu không, theo mặc định, nó sẽ chiếm toàn bộ không gian theo chiều ngang.

95
neoneye 2012-03-12 03:37.

Thuộc tính box-align của CSS 3

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
71
James Moberg 2011-06-24 11:42.

Gần đây tôi đã phải căn giữa một div "ẩn" (tức là, display:none;) có một biểu mẫu được lập bảng bên trong nó cần được căn giữa trên trang. Tôi đã viết mã jQuery sau để hiển thị div ẩn và sau đó cập nhật nội dung CSS theo chiều rộng được tạo tự động của bảng và thay đổi lề để căn giữa nó. (Chuyển đổi hiển thị được kích hoạt bằng cách nhấp vào một liên kết, nhưng mã này không cần thiết để hiển thị.)

LƯU Ý: Tôi đang chia sẻ mã này, vì Google đã đưa tôi đến giải pháp Stack Overflow này và mọi thứ sẽ hoạt động ngoại trừ việc các phần tử ẩn không có bất kỳ chiều rộng nào và không thể thay đổi kích thước / căn giữa cho đến khi chúng được hiển thị.

$(function(){ $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

68
william44isme 2013-04-07 22:22.

Cách tôi thường làm là sử dụng vị trí tuyệt đối:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

Các div bên ngoài không cần thêm bất kỳ phụ đề bổ sung nào để điều này hoạt động.

62
ch2o 2012-06-01 05:32.

Đối với Firefox và Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Đối với Internet Explorer, Firefox và Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Các text-align:bất động sản là không bắt buộc cho các trình duyệt hiện đại, nhưng nó là cần thiết trong trình duyệt Internet Explorer Quirks Mode để hỗ trợ trình duyệt cũ.

58
Ankit Jain 2013-07-20 00:21.

Sử dụng:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

55
Kilian Stinson 2015-03-13 04:01.

Một giải pháp khác cho điều này mà không cần phải đặt chiều rộng cho một trong các phần tử là sử dụng transformthuộc tính CSS 3 .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Bí quyết là translateX(-50%)đặt #innerphần tử 50 phần trăm ở bên trái chiều rộng của chính nó. Bạn có thể sử dụng thủ thuật tương tự để căn chỉnh theo chiều dọc.

Đây là một Fiddle hiển thị căn chỉnh theo chiều ngang và chiều dọc.

Thông tin thêm có trên Mạng nhà phát triển Mozilla .

50
Willem de Wit 2013-10-26 01:53.

Chris Coyier, người đã viết một bài đăng xuất sắc về 'Tập trung vào cái không xác định' trên blog của mình. Đó là một tập hợp nhiều giải pháp. Tôi đã đăng một cái không được đăng trong câu hỏi này. Nó có nhiều hỗ trợ trình duyệt hơn so với giải pháp Flexbox và bạn không sử dụng display: table;có thể làm hỏng những thứ khác.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
45
BenjaminRH 2013-05-28 06:12.

Gần đây tôi đã tìm thấy một cách tiếp cận:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Cả hai phần tử phải có cùng chiều rộng để hoạt động chính xác.

39
Lalit Kumar 2013-12-04 21:30.

Ví dụ: hãy xem liên kết này và đoạn mã bên dưới:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Nếu bạn có nhiều con dưới một cha mẹ, thì nội dung CSS của bạn phải giống như ví dụ này trên fiddle .

Nội dung HTML trông như thế này:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Sau đó, hãy xem ví dụ này trên fiddle .

34
John Slegers 2016-02-20 06:57.

Căn giữa chỉ theo chiều ngang

Theo kinh nghiệm của tôi, cách tốt nhất để căn giữa một hộp theo chiều ngang là áp dụng các thuộc tính sau:

Hộp đựng:

  • nên có text-align: center;

Hộp nội dung:

  • nên có display: inline-block;

Bản giới thiệu:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Xem thêm Fiddle này !


Căn giữa theo cả chiều ngang và chiều dọc

Theo kinh nghiệm của tôi, cách tốt nhất để căn giữa một hộp theo cả chiều dọc và chiều ngang là sử dụng một vùng chứa bổ sung và áp dụng các thuộc tính sau:

Hộp đựng bên ngoài:

  • nên có display: table;

Hộp đựng bên trong:

  • nên có display: table-cell;
  • nên có vertical-align: middle;
  • nên có text-align: center;

Hộp nội dung:

  • nên có display: inline-block;

Bản giới thiệu:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Xem thêm Fiddle này !

32
joan16v 2014-08-23 02:10.

Cách dễ nhất:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

32
Salman A 2014-01-18 08:18.

Nếu chiều rộng của nội dung không xác định, bạn có thể sử dụng phương pháp sau . Giả sử chúng ta có hai yếu tố sau:

  • .outer -- chiều rộng đầy đủ
  • .inner - không đặt chiều rộng (nhưng có thể chỉ định chiều rộng tối đa)

Giả sử chiều rộng tính toán của các phần tử lần lượt là 1000 pixel và 300 pixel. Tiến hành như sau:

  1. Bọc .innerbên trong.center-helper
  2. Tạo .center-helpermột khối nội tuyến; nó có cùng kích thước khi .innerlàm cho nó rộng 300 pixel.
  3. Đẩy .center-helper50% sang phải liên quan đến cha mẹ của nó; điều này đặt bên trái của nó ở 500 pixel wrt. bên ngoài.
  4. Đẩy .innersang trái 50% so với cha mẹ của nó; điều này đặt bên trái của nó ở -150 pixel wrt. trung tâm trợ giúp có nghĩa là bên trái của nó ở 500 - 150 = 350 pixel wrt. bên ngoài.
  5. Đặt mục tràn .outerthành ẩn để ngăn thanh cuộn ngang.

Bản giới thiệu:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

28
Kenneth Palaganas 2013-10-15 02:09.

Bạn có thể làm một cái gì đó như thế này

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Điều này cũng sẽ căn chỉnh #innertheo chiều dọc. Nếu bạn không muốn, hãy xóa các thuộc tính displayvertical-align;

28
Paolo Forgia 2017-06-09 22:34.

Căn chỉnh văn bản: căn giữa

Áp dụng text-align: centernội dung dòng được căn giữa trong hộp dòng. Tuy nhiên, vì div bên trong theo mặc định width: 100%nên bạn phải đặt chiều rộng cụ thể hoặc sử dụng một trong các cách sau:

  • display: block
  • display: inline
  • display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Ký quỹ: 0 tự động

Sử dụng margin: 0 autolà một tùy chọn khác và nó phù hợp hơn với khả năng tương thích của các trình duyệt cũ hơn. Nó hoạt động cùng với display: table.

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Flexbox

display: flexhoạt động giống như một phần tử khối và trình bày nội dung của nó theo mô hình flexbox. Nó hoạt động với justify-content: center.

Xin lưu ý: Flexbox tương thích với hầu hết các trình duyệt nhưng không phải tất cả. Xem hiển thị: flex không hoạt động trên Internet Explorer để biết danh sách đầy đủ và cập nhật về khả năng tương thích của các trình duyệt.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Biến đổi

transform: translatecho phép bạn sửa đổi không gian tọa độ của mô hình định dạng trực quan CSS. Sử dụng nó, các phần tử có thể được dịch, xoay, thu nhỏ và làm lệch. Để căn giữa theo chiều ngang, nó yêu cầu position: absoluteleft: 50%.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


<center> (Không được dùng nữa)

Thẻ <center>là HTML thay thế cho text-align: center. Nó hoạt động trên các trình duyệt cũ hơn và hầu hết các trình duyệt mới nhưng nó không được coi là một phương pháp hay vì tính năng này đã lỗi thời và đã bị xóa khỏi các tiêu chuẩn Web.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

26
caniz 2014-01-28 23:55.

Đây là những gì bạn muốn theo cách ngắn nhất.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}
25
Sandesh Damkondwar 2017-04-04 10:12.

Flex có hơn 97% phạm vi hỗ trợ trình duyệt và có thể là cách tốt nhất để giải quyết những vấn đề này trong vòng vài dòng:

#outer {
  display: flex;
  justify-content: center;
}
25
Milan Panigrahi 2018-06-11 05:53.

Bạn có thể sử dụng display: flexcho div bên ngoài của mình và ở giữa theo chiều ngang, bạn phải thêmjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

hoặc bạn có thể truy cập w3schools - CSS flex Property để biết thêm ý tưởng.

24
Billal Begueradj 2016-09-23 20:49.

Phương pháp này cũng hoạt động tốt:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Đối với bên trong <div>, điều kiện duy nhất là nó heightwidthkhông được lớn hơn những cái trong thùng chứa của nó.

23
Miguel Leite 2014-02-12 05:51.

Chà, tôi đã cố gắng tìm ra một giải pháp có thể phù hợp với mọi tình huống, nhưng sử dụng JavaScript:

Đây là cấu trúc:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Và đây là đoạn mã JavaScript:

$(document).ready(function() { $('.container .content').each( function() {
    container = $(this).closest('.container'); content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Nếu bạn muốn sử dụng nó trong một cách tiếp cận đáp ứng, bạn có thể thêm những điều sau:

$(window).resize(function() { $('.container .content').each( function() {
    container = $(this).closest('.container'); content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});
21
Pnsadeghy 2013-11-17 09:56.

Một tùy chọn đã tồn tại mà tôi tìm thấy:

Mọi người nói hãy sử dụng:

margin: auto 0;

Nhưng có một lựa chọn khác. Đặt thuộc tính này cho div mẹ. Nó hoạt động hoàn hảo bất cứ lúc nào:

text-align: center;

Và hãy xem, trẻ em là trung tâm.

Và cuối cùng là CSS dành cho bạn:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Desiree Rogers, trái, và Cheryl Mayberry McKissack Chuyển sang, Fenty Beauty và Pat McGrath, có một đế chế làm đẹp mới do phụ nữ làm chủ đang trỗi dậy. Sau thương vụ mua lại mỹ phẩm Black Opal vào tháng 9, đội ngũ quyền lực của Giám đốc điều hành công ty Desiree Rogers và Chủ tịch Cheryl Mayberry McKissack đã thông báo mua lại thương hiệu làm đẹp tiên phong Fashion Fair từ người sáng lập Johnson Publishing Company (JPC).

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Đối với những người có quá nhiều thời gian, tiệc tiết lộ giới tính là một cách thú vị để không cần áp đặt những định kiến ​​hạn chế lên thai nhi trước một đối tượng bạn bè giả vờ quan tâm một cách lịch sự. Tuy nhiên, việc chỉ dựa vào những chiếc bánh nướng có màu nhân tạo để biểu thị một tiếng hoo-ha hoặc một đứa trẻ đi tè đã trở nên xa xỉ trong các bậc cha mẹ trên Instagram.

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Hôm thứ Tư, cựu Bộ trưởng An ninh Nội địa Kirstjen Nielsen vì một lý do nào đó đã được đưa ra một diễn đàn để phát biểu tại Hội nghị thượng đỉnh Những người phụ nữ quyền lực nhất của Fortune. Và có thể đoán trước được, người phụ nữ giám sát các nỗ lực (đang diễn ra) của chính quyền Trump nhằm chia cắt các gia đình ở biên giới đã sử dụng thời gian của mình như một cơ hội để tự bảo vệ mình và tự nhận mình là người — và hãy hít thở sâu ở đây — “đã nói sự thật với quyền lực.

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Vì thế hệ mới nhất của chiếc xe điều chỉnh được yêu thích trên thế giới hiện đã có mặt tại đây, nên chỉ có điều kiện là Toyota Racing Development sẽ đưa phiên bản Supra thế hệ thứ năm sửa đổi của riêng mình đến SEMA vào tháng tới. Toyota đã cho chúng tôi một gợi ý về những gì sẽ xảy ra trong tuần này: một chiếc Concept GR Supra 3000GT hiện đại.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language