Asked  7 Months ago    Answers:  5   Viewed   20 times

I have a working code here: http://jsfiddle.net/WVm5d/ (you might need to make the result window bigger to see the align center effect)

Question

The code works fine but I don't like to have display: table;. It's the only way I could make the wrap-class align center. I think it would be better if there was a way to use display: block; or display: inline-block;. Is it possible to solve the align center another way?

Adding a fixed with to the container is not an option for me.

I will also paste my code here if the JS Fiddle link gets broken in the future:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}
<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

 Answers

46

The accepted solution wouldn't work for me as I need a child element with display: inline-block to be both horizontally and vertically centered within a 100% width parent.

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.

Here is a CodePen demo and a snippet of the relevant code below:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="parent">
  <a class="child" href="#0">Button</a>
</div>
Tuesday, June 1, 2021
 
jwegner
answered 7 Months ago
41

Well display: inline-block can be a bit tricky to get cross-browser. It will require at minimum, a few hacks and, for Firefox 2, potentially an extra element.

CSS

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

display: -moz-inline-stack is for Firefox 2. All the immediate children will need to have display: block or otherwise be block level elements. Note if you need your inline-block element to shrink wrap I think you can use display: -moz-inline-box instead.

zoom: 1 gives hasLayout to the element (for IE 7 and below). Part 1 of the hack needed for IE7 and below compatibilty.

**display: inline* is a hack second part of the hack needed for IE7 and below compatibility.

I occasionally need to add overflow: hidden for IE compatibility as well.

For your specific situation i think what you need is:

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
  vertical-align: top;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
  vertical-align: top;
}
</style></head><body>
  <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>
Thursday, July 29, 2021
 
cbcp
answered 4 Months ago
94

This link can help to solve it: Cross-Browser Inline-Block

The very least you need to make inline-block work cross-browser (incl IE6/7) is:

.my-inline-block {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

You may need to fix additional quirks; details and explanations are in the link...

Wednesday, August 4, 2021
 
nikosd23
answered 4 Months ago
67

In this case, I would probably use a wrapper and transition one of the two transforms for the wrapper and the other one for the element itself.

demo

HTML:

<div class='wrap'>
  <div class='el'></div>
</div>

Relevant CSS:

.wrap {
  transition: transform .5s cubic-bezier(.39, -.6, 1, -.6);
}
.el {
  transition: transform .5s cubic-bezier(.27, .875, .575, .87);
}
.wrap:hover { transform: scale(2,2); }
.wrap:hover .el { transform: translateX(-50px); }

Not sure it's a better idea than simulating a translateX by using left.

Another idea would be not to use a transition, but an animation and set the keyframes such that to obtain the desired effect.

Thursday, August 5, 2021
 
Mark116
answered 4 Months ago
85

The behavior location should be relative to your HTML file, not your CSS like any other declaration using url(). So assuming your index.html and PIE.htc is in root and your CSS is inside a 'css' folder, you should go like this:

background-image: url(../images/example.jpg);
behavior: url(PIE.htc);

Also, try adding a .htaccess file with the following content in the same location as the PIE.htc file:

AddType text/x-component .htc

Hope this helps.

Monday, August 9, 2021
 
dimi
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share