How to align these elements to the center?

Question

I have this page:

http://paul.dac-proiect.ro/

I put a picture below to better understand what I want to do.

I want to arrange buttons and text to the center, as in the picture above

This is code HTML:

<div class="text">
    <div class="left" style="float:left;display:inline-block;">
        <div class="inline">
            <img class="slideshow-prev" src="/wp-content/themes/wpbootstrap/images/butoane-1.png" alt="photo3">
        </div>
        <div class="inline">
            <img class="slideshow-next" src="/wp-content/themes/wpbootstrap/images/butoane-4.png" alt="photo3">
        </div>
        <p style="display: block;"></p>
    </div>
    <div class="text2">
        <p style="display:block;">TEXT PENTRU PRIMA IMAGINE</p>
        <p>TEXT PENTRU A DOUA IMAGINE</p>
        <p>TEXT PENTRU A TREIA IMAGINE</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p></p>
    </div>
    <p></p>
</div>

I want this line to be responsive, I do not want to use fixed widths.

I tried following to align center but do not think it is fair.

.text {
    width:300px; //Here is a fixed width and I do not want so
    margin:0 auto;
}

After we made this change, the elements look like.

Can you help me to solve this problem?

Thanks in advance!

Answer 1

Try this solution:

.text {
    text-align: center;
    background-color: white;
}

.left {
    //remove float:left;
    display: inline-block;
}

.text2 {
    vertical-align: top;
    display: inline-block;
}

.contact {
    text-align: center;
}

If you don't want the contact information to be aligned center just remove the last selector.

Answer 2

I created a different solution all together for you. I'm a front-end designer and I took a different approach to your idea. I think it looks cleaner on the site, and it's also 100% responsive.

Sample design image.

To achieve this, simply use this CSS to replace the existing CSS under these classes. I want to make a note that your HTML mark-up is extreme spaghetti. Also, don't use floats with inline-block, that makes no sense. Use inline-block for everything, and use float only when you need to float things to the right hand side (such as a navigation bar), or of course it's original intended purpose.

.text {
  display: block;
  width: 100%;
  float: none;
  text-align: center;
  background-color: #fff;
  padding: 10px 0 4px;
  border-bottom: 1px solid #F0F0F0;
}

.inline{
display: inline-block;
cursor: pointer;
}

.contact {
  padding-top: 24px;
}

On this line of HTML below, remove the inline CSS float and display:inline-block .

<div class="left" style="float:left;display:inline-block;">

Answer 3

.text2 { text-align:center; } .text2 p { text-align:center; }

Description part of slider needs to be in center and it is in "text2" class. so we are aligning i in center.

I hope this will work for you.

Answer 4

I have modified your HTML a bit, removed inline style from an element having class left

HTML

<div class="text">
    <div class="left">
        <div class="inline">
            <img class="slideshow-prev" src="/wp-content/themes/wpbootstrap/images/butoane-1.png" alt="photo3">
        </div>
        <div class="inline">
            <img class="slideshow-next" src="/wp-content/themes/wpbootstrap/images/butoane-4.png" alt="photo3">
        </div>
        <p style="display: block;"></p>
    </div>
    <div class="text2">
        <p style="display:block;">TEXT PENTRU PRIMA IMAGINE</p>
        <p>TEXT PENTRU A DOUA IMAGINE</p>
        <p>TEXT PENTRU A TREIA IMAGINE</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p></p>
    </div>
    <p></p>
</div>

CSS

.text {
  text-align:center;
}
.text div {
    display: inline-block;
}